前端 vue 项目上线前操作

目录

一、打包分析

二、CDN加速

三、项目部署

1. 打包部署

2. nginx 解决 history 刷新 404 问题

3. nginx配置代理解决生产环境跨域问题 

---

一、打包分析

项目编写完成后，就需要部署到服务器上供他人访问。但是在此之前，我们可以先预览项目的体积大小，优化其不必要的内存开销。

进入到该项目中，在命令行窗口输入打包分析代码 

npm run preview --report

 之后可以进入到预览页面，我们可以把 mock 相关给去除，因为这是在开发阶段模拟数据用的，在真实的环境中，是用不到mock的

• 去除main.js中对于mock.js的引用

二、CDN加速

CND 本名为分发服务器，意为更近的访问区间更快的访问速度将所需要的文件返回给客户端。在使用 npm 安装第三方库时，这些库会被打包到最终的构建文件中，导致构建文件体积增大。而通过 CDN 引入，这些库不会被打包到构建文件中，从而显著减少了打包后的文件体积。例如，对于一些大型库如 Element-UI，其打包后的体积可能相当可观，通过 CDN 引入可以有效减轻打包负担。把大的文件在打包时排除在外，可以缩小打包的大小，保证 js 的加载速度，排除的包可以采用 CDN 的方式链接引入。

互联网上有很多免费的公共库 CDN，例如 cdnjs、jsdelivr、unpkg，但哪个最稳定，始终没有明确的答案。有些国外的 CDN 虽然有大公司支持，但在国内无法确保网络稳定性；有些国内的 CDN 虽然网络稳定，但无法确保未来是否仍在维护。

https://cdnjs.com/CDNJS提供非常完整的 JavaScript 库(国外): https://cdnjs.com/

http://staticfile.org/7牛云提供的CDN库 ： http://staticfile.org/

http://www.jsdelivr.com/国内CDN备案给注销了，现在使用的是日本等周边的服务器:  http://www.jsdelivr.com/

字节跳动静态资源库： http://cdn.bytedance.com/

如下，这里进入 cdnjs 网站搜索想要引入的包，复制其链接粘贴到项目的 public/index.html 即可

我们需要在vue.config.js 配置文件配置哪些包在打包时排除，然后在public/index.html 引入样式和链接即可。

1. webpack排除打包-代码位置(vue.config.js)

这个 externals 里面配置的信息是键值对(key-value)， key 第三方依赖库的名称，同package.json文件中的 dependencies 对象的key一样。

value 第三方依赖编译打包后生成的js文件，然后js文件执行后赋值给window的全局变量名称。

那如何找这个变量名呢？可以复制你需要引入的 cdn 链接，在浏览器打开。但由于这些 js 是压缩过的，所以需要自己找个在线格式化 js 代码的工具(这里给个链接：https://www.qianbo.com.cn/Tool/Beautify/Js-Formatter.html)，把压缩过的 js 代码拷贝过去，就可以查看代码了。

这里我找了一个 vue 的 来测试， 其中 t 就是 this, this 就是 window 对象，那么 vue 的全局变量就是 Vue

2. 在 public/index.html 页面引入样式和 js 文件

 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet"><!-- // 外部引入的 cdn , 这样就打包就可以把这三个文件排除在外 --><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script><script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script>

之后重启项目就好了。

用 externals 提取第三方依赖包后，之前引入的依赖(如入口文件 main.js)是否需要改动呢？

如果引入的链接放在 app 容器的后面，则需要删除。这是因为先引入 app容器，再引入外部链接，就会现在 main.js 中编译 vue、elementUI，此时 vue、elememtUI 是不存在的。总之，只要在 main.js 中引入的依赖，CDN 链接都放在 app.js 之前加载，就不会出现问题。

如果引入的链接放在 app 容器的后面，则不需要删除

三、项目部署

1. 打包部署

1. 安装 nginx 

如下，安装好 nginx 后，有如下目录，把打包后的 html、js、css 放在 html 中

打包项目，执行命令

npm run build:prod

npm run *** 不是一成不变的，需要根据项目中的 package.json 文件来。如果项目中的 scripts 写的是 build ,那么 命令就是 npm run blild

 

打包后会在项目中出现一个 dist 文件夹， 把 dist 目录下所有文件拷贝放到 nginx 目录下的 html 目录中

2. 进入到 nginx 目录下，找到 nginx.exe ，双击后即启动了(会一闪而过) 。默认端口是80

停止服务

 ./nginx -s stop  #停止命令

2. nginx 解决 history 刷新 404 问题

设置 nginx 无论请求什么地址，都返回 index.html 页面

3. nginx配置代理解决生产环境跨域问题 

在 nginx 配置文件配置代理(nginx 安装目录/config)