Vue项目前端摆设——nginx方式

1. 预备好服务器，下载安装nginx并启动

恣意在网上找一篇文章，下载安装之后，启动nginx
2. vue项目编译打包

在项目根目录下 运行npm run build 进行编译打包

打包完成之后，在项目根目录下会多一个dist目录

3. 将dist目录上传到服务器上


4. 设置nginx安装目录下的nginx.config文件

因为利用到nginx进行代理，以是vue.config.js内里的代理是不会收效的，我们利用nginx来设置反向代理,设置完成生存文件

1. server {
2.         listen       3012; #访问端口
3.         server_name  localhost;
4.         location / {
5.                   root /xx/xx/xx/dist; #前端dist包地址
6.            index  index.html index.htm;
7.                try_files $uri $uri/ /index.html;
8.                 }
9.         location /ele/ {
10.                 proxy_set_header x-forwarded-for  $remote_addr;
11.                 proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
12.                 }
13.          
15.         charset utf-8;
16.     }

复制代码

5. 重启nginx

利用service nginx restart 或则 nginx -s reload 进行nginx重启
6. 访问地点

地点为服务器地点，端口是nginx设置的访问端口，
因为我设置的是3012，以是直接 ip:3012即可。假如首页有其他路由，可以利用ip:3012/router的方式，好比首页路由是/index 访问地点就是ip:3012/index

来源：https://blog.csdn.net/qq_42900469/article/details/131509712
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！