关于本次项目上线的流程

将路由模式改为history

在router/index.js中进行配置，将其改为历史模式

哈希模式

历史模式

• hash模式，#后的地址变化不会引起页面刷新，
• history没有#， 地址变化会引起页面的刷新

打包分析

生成打包分析的命令： npm run preview -- --report

去除引用

找到大模块，比如这个mock.js 项目就没有使用到，直接砍掉 main.js中注释掉对mock的引用

cdn加速

element ui 和vue cos-js-sdk-v5.js(腾讯云传头像的)，这三个比较大的文件在打包中排除

改为cdn加速需要 在index.html中进行配置

cdn地址

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">

<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>

安装nginx

nginx这个软件在windows中很友好，但是记得一定要装在英文目录下！！！

打包文件

npm run build:prod执行打包命令后会生成dist文件夹

启动服务 && nginx命令

./nginx -s reload #重启
./nginx -s stop #停止
启动服务器,双击 闪一下就表示打开了

将打包生成的dist文件夹内的文件全部拷贝到nginx的html文件夹中

404与跨域问题解决

404问题

进入页面后会出现404的原因是因为history模式下,地址变化会引起页面的刷新,就会请求向服务器请求login.index文件,而服务器中没有这个文件,所以就返回404. 为了解决这个问题,在服务器中修改nginx配置文件,将所有请求都统一返回index.js
文件地址：

具体配置：

跨域问题解决

执行npm run build:prod 后,会将基地址改为/prod-api, 执行命令后会读取.env.production文件中的环境变量,而这个环境变量又被应用于请求文件的配置中.所以就造成了跨域.

开发环境中使用了诸多工具包,而nginx服务中则只有html.css.js ,在开发化境中的跨域问题是通过webpack配置了proxy,将target改为服务器地址, 生产环境中的跨域问题则需要 在nginx中的nginx.conf文件中进行配置代理,将location中 /prod-api 中配置目标服务器地址,通过服务器访问服务器就不存在跨域问题了.