用nginx部署多个Vue项目
自己做的移动端,其他人做的pc端,要求部署到一起,个人研究了一下午,参考各路大神方案,做了一个,如有错误,请指正。下载nginx压缩包并解压;将准备好的多个项目进行打包;打包后将dist下的index.html和static文件复制到nginx文件下的html中;将第二个项目的打包文件放置在html下新文件下,如:dh; 我在本次中将html原有的两个文件删除掉了;多个项目依次增加。...
·
自己做的移动端,其他人做的pc端,要求部署到一起,个人研究了一下午,参考各路大神方案,做了一个,如有错误,请指正。
- 下载nginx压缩包并解压;
- 将准备好的多个项目进行打包;打包后将dist下的index.html和static文件复制到nginx文件下的html中;将第二个项目的打包文件放置在html下新文件下,如:dh; 我在本次中将html原有的两个文件删除掉了;多个项目依次增加。
- 进行第二个项目的配置:在打包第二个文件时需要在config\index.js文件中的build:{}中修改assetsPublicPath:’/此处为第2步中新建的文件夹名/’,
- 在第二个项目src/router/index.js中修改router
- 在nginx中的配置:在conf/nginx.conf中修改server{},
Location / {
root html;
try_files $uri $uri/ @router;
index index.html index.html;
}
Location /dh/{
root html/html;
try_files $uri $uri/ @router;
index index.html index.html;
}
Location @router {
Rewrite ^.*$ /index.html last;
}
6.启动nginx并重新运行
7.在浏览器中输入localhost:端口号 (此处端口号指的是conf/nginx.conf中修改server{}的端口号) 即可访问第一个项目,输入localhost:端口号/第二项目的文件夹名 即可访问第二个项目
eg:localhost:80
eg:localhost:80/dh
更多推荐
已为社区贡献2条内容
所有评论(0)