Vue项目前端部署——nginx方式
1. 准备好服务器，下载安装nginx并启动任意在网上找一篇文章，下载安装之后，启动nginx
2. vue项目编译打包
在项目根目录下 运行npm run build 进行编译打包
https://img-blog.csdnimg.cn/11c55e0db5c84bfb814cae34b95d0964.png
打包完成之后，在项目根目录下会多一个dist目录
https://img-blog.csdnimg.cn/5d2ff1003bfa4f49bc9abe3e9de4ce7a.png
3. 将dist目录上传到服务器上
https://img-blog.csdnimg.cn/60a51fc3e0834ecab0e9f9d1690efe5c.png
4. 配置nginx安装目录下的nginx.config文件
由于使用到nginx进行署理，所以vue.config.js里面的署理是不访问效的，我们使用nginx来配置反向署理,配置完成生存文件
server {
listen 3012; #访问端口
server_namelocalhost;
location / {
root /xx/xx/xx/dist; #前端dist包地址
indexindex.html index.htm;
try_files $uri $uri/ /index.html;
}
location /ele/ {
proxy_set_header x-forwarded-for$remote_addr;
proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
}
charset utf-8;
}
5. 重启nginx
使用service nginx restart 或则 nginx -s reload 进行nginx重启
6. 访问地址
地址为服务器地址，端口是nginx配置的访问端口，
由于我配置的是3012，所以直接 ip:3012即可。如果首页有其他路由，可以使用ip:3012/router的方式，比如首页路由是/index 访问地址就是ip:3012/index
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]