nginx中部署多vue项目(亲自踩坑)

注：博主用的是vue-cli3搭建的vue项目，在nginx中用一个端口配置不同的url，

分别通过127.0.0.1/comfessionWall和127.0.0.1/office访问

修改vue.config.js

在第一个vue项目的vue.config.js添加publicPath: '/comfessionWall'

module.exports = { //部署应用包时的基本 URL publicPath: '/comfessionWall', };

在第二个vue项目的vue.config.js中添加publicPath: '/office'

module.exports = { //部署应用包时的基本 URL publicPath: '/office', };

修改router.js

在vue-router的配置文件router.js中修改相对应的base为base: '/comfessionWall'和base: '/office'

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ base: '/comfessionWall', }) import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ base: '/office', })

修改nginx.conf或者其他conf

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; } location /comfessionWall { alias /usr/share/nginx/html/comfessionWall; index index.html index.htm; try_files $uri $uri/ /comfessionWall/index.html; } location /office { alias /usr/share/nginx/html/office; index index.html index.htm; try_files $uri $uri/ /office/index.html; } }