nginx 在同端口下，配置多个vue项目

步骤1：前端修改代码

1. 修改router/index.js

增加一项base,名字和文件夹名保持一致，在接下来的nginx配置中有用

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
   mode: 'history',
   base: '/stress',
   routes: [{
       path: '/',
       name: 'Index',
       component: Index
   }]
})

2.修改静态资源的配置路径

网上都说是vue.config.js,修改publicPath实际根据自己的项目而定
我的是将配置进行了修改，修改为/stress/ 让静态资源能访问到

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
    dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/stress/',
        proxyTable: {},

        // Various Dev Server settings
        host: '0.0.0.0', // can be overwritten by process.env.HOST
        port: 8091, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


        /**
         * Source Maps
         */

        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'cheap-module-eval-source-map',

        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,

        cssSourceMap: true
    },

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

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

        /**
         * Source Maps
         */

        productionSourceMap: false,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],

        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }
}

3.修改nginx配置,配置如下

server {
    # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
    listen       8095;
    # 服务名称，无所谓
    server_name  pcs.dbh.dynabook.com;
    client_max_body_size 20m; 
    client_body_buffer_size 128k;
    # 上述端口指向的根目录
  
    # 项目根目录中指向项目首页
   # index index.html;
    # root /home/phpwebsites/;    
    # index index.html;
	location / {
     root /home/phpwebsites/;
	    try_files $uri $uri/  @router;
       index  index.html index.htm;
    }
	  location /stress/ {
            alias  /home/phpwebsites/stress/dist/;
            index  index.html index.htm;
             try_files $uri $uri/ /stress/dist/index.html;
    }
    
  location /bug/ {
            alias  /home/phpwebsites/bug/dist/;
            index  index.html index.htm;
             try_files $uri $uri/ /bug/dist/index.html;
    }

    # 根请求会指向的页面
    # location / {
    #   # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
    #   try_files $uri $uri/ @router;
    #   # 请求指向的首页
    #   index index.html;
    # }

    # # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    # location @router {
    #   rewrite ^.*$ /index.html last;
    # }

}

效果图如下：