前端 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 虽然网络稳定，但无法确保未来是否仍在维护。