vue vue-cli2多个项目在同一域名和端口上的nginx配置

在工作当中，有很多前端项目，但是不可能每一个项目都配一个nginx 或者服务器，那么就会产生一个nginx上面配置多个前端项目。
下面是我在工作中的一些问题。现在服务器上有一个nginx 并且也在线上运行，现在要再加一个项目上去，按照正常的逻辑进行配置，但是怎么也上不去，同时在网上也搜了一些资料，最终还是没有解决。通过以下步骤是记录一台nginx同时跑两个项目的记录。

展示以下两个项目文件目录，其中rootProject是原有的，newProject是要新增的项目

image.png

image.png

1.在newProject项目的config文件夹内的index.js内修改(注意是build内)

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/newProject/',

image.png

将”/“更改为"/newProject/"
2.将index.html中的meta标签更改

3.在src/router/index.js文件修改,讲路由base属性更改为以下

export default new Router({
  //nginx 配置
  base: '/newProject/',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

4.使用webpack打包的项目需要更改以下配置，在build/webpack.base.conf.js中
output配置项中，增加publicPath:'/newProject/'

context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    // publicPath: process.env.NODE_ENV === 'production'
    //   ? config.build.assetsPublicPath
    //   : config.dev.assetsPublicPath
    publicPath:'/newProject/'
  },

同时需要把图片配置中options中增加publicPath属性

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          publicPath:'/newProject/',
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

5.查看打包后的在dist生成的打包目录中找到index.html

image.png

都已经有了如上更改
6.更改nginx配置
首先打开nginx.conf，查看原有项目为

location / {

            root   var/dist;

            index  index.html index.htm;

            try_files $uri $uri/ /index.html;

            # root   html;

            # index  index.html index.htm;

            #proxy_intercept_errors on;

            #proxy_set_header  X-Forwarded-For $remote_addr;

            #proxy_set_header  X-Forwarded-Host $server_name;

            #proxy_set_header Host $host;

            #proxy_pass http://localhost;

        }

设置的是根项目，不用动。增加以下配置：

location /newProject {
            alias /usr/local/nginx/newProject/;
            index index.html index.htm;
            try_files $uri $uri/ /lottery/index.html;
        }

再配置自己的网络访问代理。就完成配置了 ，运行./nginx -s reload发现已经可以。