vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）

打包流程：

一、项目完成后运行npm run build,生成一个打包文件夹dist，

二、新建vue.config.js,设置静态资源路径为’./’,解决打包后默认路径的白屏问题

三、关闭生产环境下的SourceMap映射文件,减小打包文件体积

四、配置alisa别名

五、使用CDN加速优化

六、去除console.log打印及注释

七、图片压缩

 

 

nginx服务器配置

打包后生成的dist文件夹放到nginx的html文件夹里面
启动控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，就可以跳转到浏览器页面了

history模式

当你使用history模式时，url就像正常的url，例如“http://yoursite.com”，

不过这种模式还需要后台的配置支持。因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器直接访问“http://yoursite.com/mapp/home”就会返回404

location / {
  try_files $uri $uri/ /index.html;
}

子目录部署

若项目没有直接部署在Nginx主目录下,而是在其子目录，如：
Nginx配置root路径为:/usr/local/nginx/html，子目录路径为：