阿里云服务器搭建Django环境三:Vue项目搭建

阿里云服务器搭建Django环境三:Vue项目搭建

1 打包vue项目
npm run build
阿里云服务器搭建Django环境三:Vue项目搭建
打包后生成的:
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
浏览器中运行报错:解决如下
找到:webpack.dev.conf.js(这是开发环境)
阿里云服务器搭建Django环境三:Vue项目搭建
ctrl+f:搜索publicPath
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
修改为:
阿里云服务器搭建Django环境三:Vue项目搭建
以上方式实践后发现没用

(dev是开发环境,build是构建版本)

再在build中的utils中,为了让element ui样式不失效(图标…),增加下面:
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
但是实际上述打包后还是不能获取资源(还是404),index.html打包的/static目录还是绝对路径,不是相对路径,再次修改生产版本,修改webpack.prod.conf.js:
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建

重新执行:npm run build

观察index.html
阿里云服务器搭建Django环境三:Vue项目搭建
ps:刚开始打包没有这个,说明现在成功了

接着执行index.html:
阿里云服务器搭建Django环境三:Vue项目搭建
可以看到成功

2 进入root用户
阿里云服务器搭建Django环境三:Vue项目搭建
cd my_vue/

压缩dist目录成rar,rz上传到my_vue中(rz不能上传文件夹,需要上传压缩包)
阿里云服务器搭建Django环境三:Vue项目搭建
但是解压缩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位
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
root下ll查看可知:
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
执行以下命令:
阿里云服务器搭建Django环境三:Vue项目搭建
然后:
阿里云服务器搭建Django环境三:Vue项目搭建
然后就可以rar解压了

相关命令:
unrar e 文件.rar 解压到当前目录

unrar x 文件.rar 这个是解压到完整的路径

unrar e 文件.rar /目录/文件夹名称/ 这个就是解压到文件的目录了。(要是没有先创建对应文件夹,就用这个吧)

也可以用rar e/x命令。(e:extract)

打包命令:
rar 文件名称.rar /对应文件夹/

阿里云服务器搭建Django环境三:Vue项目搭建
解压dist.rar
阿里云服务器搭建Django环境三:Vue项目搭建
这样解压直接在当前目录下解压,建议还是用下面:
阿里云服务器搭建Django环境三:Vue项目搭建
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
编辑好并保存
阿里云服务器搭建Django环境三:Vue项目搭建

然后nginx -s reload(修改nginx.conf配置并保存后执行),重新刷新页面
发现错误403,nginx错误日志地址:/var/log/nginx
查看error.log(var 和etc是同一个根目录下的,也就是/)(cat:一次性查看日志,tail -f:动态查看日志)
发现错误是 Permission denied,查看配置文件,发现启动用户是nginx,不是root
阿里云服务器搭建Django环境三:Vue项目搭建
重新配置好nginx.conf文件,保存 :wq,然后执行 nginx -s reload,刷新404

nginx主要通过http核心模块中的location来匹配浏览器发出URL来进行资源匹配,匹配成功了就返回结果

阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
但是这样还是404,因为解压后static目录不见了,导致路径出现问题

重新进入my_vue:
阿里云服务器搭建Django环境三:Vue项目搭建
重新上传dist.rar
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
指定路径解压:x
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
此时解压后就存在static目录了,pwd获取新的index.html的路径
/root/my_vue/auto_test/dist

然后重新配置nginx.conf
阿里云服务器搭建Django环境三:Vue项目搭建
重新执行nginx -s reload ,然后刷新网页,成功:
阿里云服务器搭建Django环境三:Vue项目搭建
打包因为修改了文件为相对路径,但是我们现在如果需要npm run dev,运行开发环境,需要把开发环境改回来:
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
然后重新npm run dev,成功:
阿里云服务器搭建Django环境三:Vue项目搭建
但是里面发现navMenu样式上重叠了:
阿里云服务器搭建Django环境三:Vue项目搭建
2级菜单样式重叠,原来是原本的nav代码有两个版本,导致样式被覆盖了出错
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
阿里云服务器搭建Django环境三:Vue项目搭建
leftNav和mynav的style都是全局样式,导致出现重复使得样式出现问题,直接把我们使用的leftNav的样式style设为scoped,把不用的nav样式设为scoped,使其只在当前组件内生效即可,就不会污染到我们的其他的样式(比如要使用的mynav中的样式)
阿里云服务器搭建Django环境三:Vue项目搭建
然后重新npm run build,观察样式:
阿里云服务器搭建Django环境三:Vue项目搭建
现在navmenu菜单可以正常展开了,然后重新打包上传到服务器即可,菜单点击展开的样式正常

然后,对于http协议访问网站,也可以设置
阿里云服务器搭建Django环境三:Vue项目搭建
还是重启配置文件:nginx -s reload

然后http:公网可以访问vue项目了
阿里云服务器搭建Django环境三:Vue项目搭建

上一篇:Linux 压缩解压命令


下一篇:buuctf-misc-基础破解-wp