阿里云服务器搭建Django环境三：Vue项目搭建
1 打包vue项目
npm run build
打包后生成的：
浏览器中运行报错：解决如下
找到：webpack.dev.conf.js（这是开发环境）
ctrl+f:搜索publicPath
修改为：
以上方式实践后发现没用
(dev是开发环境，build是构建版本)
再在build中的utils中，为了让element ui样式不失效（图标…），增加下面：
但是实际上述打包后还是不能获取资源（还是404），index.html打包的/static目录还是绝对路径，不是相对路径，再次修改生产版本，修改webpack.prod.conf.js：
重新执行：npm run build
观察index.html
ps:刚开始打包没有这个,说明现在成功了
接着执行index.html：
可以看到成功
2 进入root用户
cd my_vue/
压缩dist目录成rar，rz上传到my_vue中（rz不能上传文件夹，需要上传压缩包）
但是解压缩rar，需要下述操作：
wget http://www.rarlab.com/rar/rarlinux-5.4.0.tar.gz 32位
wget http://www.rarlab.com/rar/rarlinux-x64-5.4.0.tar.gz 64位
root下ll查看可知：
执行以下命令：
然后：
然后就可以rar解压了
相关命令：
unrar e 文件.rar 解压到当前目录
unrar x 文件.rar 这个是解压到完整的路径
unrar e 文件.rar /目录/文件夹名称/ 这个就是解压到文件的目录了。（要是没有先创建对应文件夹，就用这个吧）
也可以用rar e/x命令。（e:extract）
打包命令：
rar 文件名称.rar /对应文件夹/
解压dist.rar
这样解压直接在当前目录下解压，建议还是用下面：
rmdir 目录名 （删除空目录）
rm -rf (-r：递归删除，-f：强制删除)
删除多个目录：
rm -rf dir1 dir2 dir3
可以选择重新删除my_vue，mkdir新建my_vue，再新建文件夹dist，将dist.rar放进去
先准备好index.html的路径：/root/my_vue/dist/index.html
编辑好并保存
然后nginx -s reload（修改nginx.conf配置并保存后执行），重新刷新页面
发现错误403，nginx错误日志地址：/var/log/nginx
查看error.log(var 和etc是同一个根目录下的，也就是/)（cat：一次性查看日志，tail -f：动态查看日志）
发现错误是 Permission denied，查看配置文件，发现启动用户是nginx，不是root
重新配置好nginx.conf文件，保存 :wq，然后执行 nginx -s reload，刷新404
nginx主要通过http核心模块中的location来匹配浏览器发出URL来进行资源匹配，匹配成功了就返回结果
但是这样还是404，因为解压后static目录不见了，导致路径出现问题
重新进入my_vue：
重新上传dist.rar
指定路径解压：x
此时解压后就存在static目录了，pwd获取新的index.html的路径
/root/my_vue/auto_test/dist
然后重新配置nginx.conf
重新执行nginx -s reload ，然后刷新网页，成功：
打包因为修改了文件为相对路径，但是我们现在如果需要npm run dev，运行开发环境，需要把开发环境改回来：
然后重新npm run dev,成功：
但是里面发现navMenu样式上重叠了：
2级菜单样式重叠，原来是原本的nav代码有两个版本，导致样式被覆盖了出错
leftNav和mynav的style都是全局样式，导致出现重复使得样式出现问题，直接把我们使用的leftNav的样式style设为scoped，把不用的nav样式设为scoped，使其只在当前组件内生效即可，就不会污染到我们的其他的样式（比如要使用的mynav中的样式）
然后重新npm run build,观察样式：
现在navmenu菜单可以正常展开了，然后重新打包上传到服务器即可,菜单点击展开的样式正常
然后，对于http协议访问网站，也可以设置
还是重启配置文件：nginx -s reload
然后http：公网可以访问vue项目了
网站图标的位置，和static是同级目录（）：
因为在nginx中，静态资源配置的路径就在root下的dist下，所以网站的图标favicon.ico也应该放在这个目录下（/root/my_vue/auto_test/dist）
