nginx部署多个vue程序方法

1、在Vue项目的路由文件src\router\index.js路由配置上加上base:’/test/’

export default new Router({
base: '/ahudp_test/', // 两边斜杠要加
mode: 'history',
routes: [
{
path: '/',
name: 'FontGround',
components: {
main: FontGround
}
}]
})

2、在Vue项目的build\webpack.prod.conf.js的output文件中加上

publicPath:”/ahudp_test”
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
publicPath:"/ahudp_test"
}

3、在vue项目config\index.js中修改打包的文件夹名为test

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../test'),

4、将vue打包生成的test文件夹放到/usr/local/nginx/html/下；

5、在nginx配置文件nginx.conf中的server文件进行如下配置

server {
        listen       8080;  //端口号
        server_name  localhost; //服务器IP
      

        location /test; {
            alias  /usr/local/nginx/html/test;  //vue项目所在文件夹地址
            try_files $uri $uri/ /test/index.html;
            index index.html index.htm;
        }
           

       location @router {
           rewrite ^.*$ /index.html last;
      }
      
    }

6、其他的vue项目按照此操作即可。