打包vue项目
npm run build
注意:
静态文件的路径配置
最笨方法:(找了很多网上的配置路径方法,都没解决)
先打包一遍,运行之后,找请求不到的静态文件请求路径是什么,再去本地项目中改,再次打包
缺点:
上线和本地不能同时满足
跨域
跨域最好让后端来做,这样打包之后不会出现各种各样的问题
比如,python后端
两行代码就解决了。
前端只需正常请求接口就可以了。
本地测试运行
安装服务器
npm i -g serve
进入打包好的dist文件夹
cd dist
运行
serve
项目配置的都没问题的话,这里就可以请求成功。
服务器安装nginx
nginx为反向代理,如果只是内网自己访问不需要配置nginx,可跳过此步。
查看是否有nginx
whereis nginx
安装nginx
npm install -y nginx
查看版本号
nginx -v
表示安装成功
启动nginx
nginx
访问服务器
以下界面即为启动成功
这里访问默认的是80端口,nginx服务器默认的是80端口,如果不能访问,大致有几种原因:
端口进程被占用
nginx未启动
nginx配置错误
服务器安全组未加入80端口
其中,端口进程被占用,如下:
查看当前进程
netstat -ntlp
或者
netstat -tunlp
杀掉进程
kill 52161
再次查看进程 如果80端口依然被占用 接着kill 直到没有80端口进程
启动 nginx
启动成功,访问服务器
停止nginx服务
nginx -s stop
重启nginx服务
nginx -s reload
修改nginx配置
找到配置文件存放位置
whereis nginx
此时 /etc/nginx 则是配置文件位置
cd /etc/nginx
nginx.conf 则是默认配置文件,编辑该文件
vim nginx.conf
可以看到默认端口是 80
可以更改默认端口---- i 切换到编辑模式 esc退出编辑模式 :wq 保存并退出 更多vim操作查文档
重启 nginx
此时再访问80端口就是报错,访问修改后的端口即可
再次查看配置文件,端口是修改后的了
修改网站的存放路径
假设是 /home/nmk/www/dist
再次重启nginx服务
因为访问的文件夹不存在,所以 404
此时,切换到 /home/nmk
cd :切换目录
ls :查看当前目录下的文件
新建www文件夹
mkdir www
再ls 就会多一个www文件夹
不需要创建dist文件,因为vue项目打包之后会自动放到dist文件中
前端项目上传
前端项目打包
npm run build
将文件夹上传至服务器的www文件夹下
---在cmd中操作就行
scp 文件路径 请求服务器 : 目标路径
如果上传失败,就把dist压缩再上传
访问服务器
不出意外的话,可以成功访问项目
出意外的话,比如:
403 无权限访问
切换到 /var/log/nginx
cd /var/log/nginx
vim error.log
可查看报错信息
可以看出index.html无权限访问
切换至 /home/nmk/www/dist
cd /home/nmk/www/dist
查看文件的访问权限用户
ll
切换至 /etc/nginx
cd /etc/nginx
编辑配置文件
vim nginx.conf
改为 root
重启nginx即可
404 未发现
(1)将路由模式改为hash
(2)修改nginx配置:
vim nginx.conf
重启即可
403 无权限
404 未找到
405 不可接受的请求方法
不允许静态文件响应POST请求,改为get请求
304 Not Modified
ETag:, 对比缓存,值没变,强制清除缓存即可,
200 请求无结果
但是如下
502 无法正常响应
其他的错误,在error.log中查看,去查相关解决办法
Access to XMLHttpRequest at 'http://192.168.1.104:70/mol' from origin 'http://192.168.1.104' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个是资源没有请求到,比如数据库资源,数据库没开启,并不是前后端接口跨域
以上出现的问题,总结:
nginx配置文件问题
后端接口问题
跨域问题
缓存问题
请求方法
路由模式
具体情况具体分析叭。遇到问题查就可以了。
整个前后端项目部署可参考
https://blog.csdn.net/m0_51534164/article/details/129535227?spm=1001.2014.3001.5502