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;
    }

}