Nginx html根目录部署Vue-Cli History脱坑记录（一）

Vue的数据绑定用起来比较方便，所以一般写Demo或者写项目都喜欢用Vue来写。但是工作中也碰到一些专门写前端的同学反馈从来没有部署过自己写的项目，甚至都没有打过包。我觉得还是有必要了解的，毕竟别人随便问你一下没事，而我碰到过要发布但是不会的窘迫。

进入正题：

1. 静态资源引用避免使用相对路径：

反例：

   <img src="../../assets/logo.png" class="headnav-container-logo" />

建议：

   <img src="@/assets/logo.png" class="headnav-container-logo" />

2. 解决 ElementUI 打包后样式无法加载的问题

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; 
import router from "./router";

把样式引入放到路由的前面就行了

解决二级路径下页面刷新空白的问题

1. 项目文件配置

Vue-Cli 2.x config/index.js
	assetsPublicPath: "/"
Vue-Cli 3.x vue.config.js
	publicPath: "/"

这里看了很多文章说要写成 “./” 但是实际操作来看，还是得默认的 “/” 才可以

还有文章说，菜单的二级路径path前面要加 “/” 但是实际操作来看，所有的二级路径都变成了一级路径，如果项目中有两个二级路径重名，比如candan1下的二级路径path:“index”，candan2下的二级路径也是path:“index”，那dev测试的时候路径肯定是candan1/index和candan2/index没有问题的，如果发布的时候把path写成 “/index” 那么不管是candan1/index还是candan2/index都会访问后面的index即candan2/index对应的index

2. Nginx配置

server {
		listen 8080;
		server_name localhost; 
		client_max_body_size 200m;
		location ~ \.(html|css|js|gif|jpg|jpeg|png|ttf|woff|ico|pdf|block|mp3)$ { 
				root html;
				index index.html index.htm; 
		}
		location / {
				root '项目路径'; 
				index index.html index.htm;
				try_files $uri $uri/ @router;
				add_header Cache-Control no-cache;
				add_header Access-Control-Allow-Origin *;
				add_header Access-Control-Allow-Credentials *;
				add_header Access-Control-Allow-Methods *;
				add_header Access-Control-Allow-Headers *;
		}
		location @router{
				rewrite ^.*$ /index.html last;
		}
		error_page 500 502 503 504 /50x.html; 
		location = /50x.html {
				root html; 
		}
}

---

至此，我的项目发布没有问题了。祝前来寻找答案的你，项目上线顺利，加油！