利用nginx 配置vue多项目环境

背景：实现的效果就是ip或者域名后面输入不同的目录，进入不同的项目
复制代码

nginx配置

nginx配置也很简单，网上也有很多，这里直接上代码了

server {
	listen 80
	root /var/www/html;
	index index.html index.htm index.nginx-debian.html;
	server_name 120.125.125.12;//你的ip或者域名，这是我乱打的
	
	//aaa项目
	location /aaa {
		try_files $uri $uri/ /aaa/index.html;
	}
	//bbb项目
	location /bbb {
		try_files $uri $uri/ /bbb/index.html;
	}
复制代码

vue项目配置(这是aaa项目修改样例，bbb项目做同样的修改)

vue也要做一定的修改

1. config下的index.js

//index.js  修改build里的assetsPublicPath字段

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    
    //vue项目要修改这里，加上项目所在子目录的名称
    assetsPublicPath: '/aaa/',

    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip:true,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
  
复制代码

2. 修改路由文件中的base

export default new Router({
    base:'/aaa/',//base修改为项目所在子目录的名称
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        ...
        ...
        ...
    ]
    ...
    ...
    ...
}

复制代码

重启nginxh后就可以了
输入http://ip:aaa  访问aaa项目
输入http://ip:bbb  访问aaa项目复制代码