利用nginx 配置vue多專案環境

一隻大提莫發表於2018-07-09
NginxVue
背景：實現的效果就是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
  }
  
複製程式碼
  1. 修改路由檔案中的base
export default new Router({
    base:'/aaa/',//base修改為專案所在子目錄的名稱
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        ...
        ...
        ...
    ]
    ...
    ...
    ...
}

複製程式碼
重啟nginxh後就可以了
輸入http://ip:aaa  訪問aaa專案
輸入http://ip:bbb  訪問aaa專案複製程式碼

相關文章