前端部署 Vue项目

打包vue项目

npm run build

注意：

静态文件的路径配置

最笨方法：（找了很多网上的配置路径方法，都没解决）

先打包一遍，运行之后，找请求不到的静态文件请求路径是什么，再去本地项目中改，再次打包

缺点：

上线和本地不能同时满足

跨域

跨域最好让后端来做，这样打包之后不会出现各种各样的问题

比如，python后端

两行代码就解决了。

前端只需正常请求接口就可以了。

本地测试运行

1. 安装服务器

npm i -g serve

2. 进入打包好的dist文件夹

cd dist

3. 运行

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.

这个是资源没有请求到，比如数据库资源，数据库没开启，并不是前后端接口跨域

以上出现的问题，总结：

1. nginx配置文件问题

2. 后端接口问题

3. 跨域问题

4. 缓存问题

5. 请求方法

6. 路由模式

具体情况具体分析叭。遇到问题查就可以了。

整个前后端项目部署可参考

https://blog.csdn.net/m0_51534164/article/details/129535227?spm=1001.2014.3001.5502