执行npm run build打包后,生成的dist文件如下:
1、当设置publicPath为/时
修改vue.config.js
文件
module.exports = { publicPath: '/', configureWebpack: { resolve: { //设置别名 alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views', 'store': '@/store', 'utils':'@/utils', 'api':'@/api', } } }, devServer: { port: 9628, }, lintOnSave: false }
在vue项目根目录中使用命令npm run build
创建输出文件,将dist文件夹下的所有内容复制到nginx目录下的webapp/
内(没有的话自行创建)。
项目部署到nginx中,nginx配置如下:
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; upstream pts{ server localhost:8081; } server { listen 8880; server_name localhost; location / { root webapp; index index.html index.htm; } location ~^/api/ { proxy_pass http://pts; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
将后台部署到tomcat并启动,将前端部署到nginx并启动
部署后请求路径
http://localhost:8880/css/app.788b254a.css
效果如下:
2、当设置publicPath的值为/vue1时
修改vue.config.js
文件
module.exports = { publicPath: '/vue1/', configureWebpack: { resolve: { //设置别名 alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views', 'store': '@/store', 'utils':'@/utils', 'api':'@/api', } } }, devServer: { port: 9628, }, lintOnSave: false }
在vue项目根目录中使用命令npm run build
创建输出文件,将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1
内(没有的话自行创建)。
项目部署到nginx中,nginx配置如下:
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; upstream pts{ server localhost:8081; } server { listen 8880; server_name localhost; location /vue1 { root webapp; index index.html index.htm; } location ~^/api/ { proxy_pass http://pts; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
将后台部署到tomcat并启动,将前端部署到nginx并启动
部署后请求路径
http://localhost:8880/vue1/css/app.788b254a.css
效果如下
注意:加上publicPath的原因是:有时一个Nginx中放了好几个子项目,需要将不同的项目通过不同的路径来访问。
对于项目1而言,修改vue.config.js
文件的publicPath
:
publicPath: '/vue1/'
对于项目2而言,修改vue.config.js
文件的publicPath
:
publicPath: '/vue2/'
分别在vue项目根目录中使用命令npm run build
创建输出文件,将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1
和webapp/vue2
内(没有的话自行创建)。
修改nginx目录中的conf/nginx.conf
文件,在 http -> server 节点中,修改location节的内容:
location /vue1 { root webapp; index index.html index.htm; } location /vue2 { root webapp; index index.html index.htm; }
在nginx根目录使用命令nginx -s reload
即可在浏览器中通过http://localhost/vue1
、http://localhost/vue2
访问项目1、项目2。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue-cli中设置publicPath:一个nginx部署多个项目时使用 - Python技术站