一个域名下部署多个vue项目

现在有这么一个需求，有两个 vue 项目， vue1和 vue2 ，如何让

http://www.baidu.com/vue1/   作为 vue1 项目的根路径

http://www.baidu.com/vue2/   作为 vue2 项目的根路径 

也就是说两个项目互相不影响？

 

现在我们创建一个名为 vue1 的项目

以3.0+ 的 vuecli 创建的项目为例，我们需要在根目录创建这个 vue.config.js 文件

// vue.config.js

module.exports = {
    // 假如想在同一个域名下配置多个项目,当前项目前缀是 /vue1
    
    // 基本路径，如果是生产(也就是run build) 那么生成的 index.html 文件，引入的js，css路径前缀会是 /vue1/ 
    publicPath: process.env.NODE_ENV === 'production' ? '/vue1' : '/',
    // 输出文件目录
    outputDir: 'vue1',

    devServer: {
        // 是否自动弹出浏览器页面
        open: true,
        // 设置为0.0.0.0则所有的地址均能访问 
        host: '0.0.0.0',
        // 端口
        port: '8888',
        https: false,
        hotOnly: false,
        // 代理配置
        proxy: {
            '/proxyApi_vant': {
                // 后端接口地址
                target: 'http://localhost:8090',
                // 代理 websockets
                ws: true,
                // 允许跨域 
                changeOrigin: true,
                // 重写路径,把 proxyApi 去掉
                pathRewrite: {
                    '^/proxyApi_vant': ''
                }
            }
        },
    }
}

第一步： 配置 publicPath

里面的重点配置是 publicPath 这个配置，这个三目表达式的意思是， 如果是生产环境，（也就是打包的时候）以 vue1 为根路径， 也就是说通过这个配置 我们打包生成的 index.html 文件， 打开会发现里面引入js css 的时候路径是以 /vue1/ 为根路径

   outputDir: 'vue1', 这个配置的作用呢，就是打包后生成的文件夹叫啥名字，原来默认都是叫dist，现在为了方便，直接生成和 vue1, 然后直接把 vue1 文件夹上传到nginx 就可以了，为了方便配置一下更好

 

第二步： 配置  vueRoueter 的 base 路径

找到自己项目中创建vueRouter 对象的位置，在这里使用 histroy 路由模式(也就是url不带 # ) , 然后重点是这个 base 属性，一定要配置成  vue1 和 publicPath 中配置的一样。

 

第三步： 把打包后的文件夹 （vue1） 上传到 服务器，然后配置 nginx 配置文件

  
     location /vue1/ {
        # 注意这里是 alias，然后指向的位置使我们上传的文件夹的具体位置
        # 注意末尾要带上 ‘/’ 哦   
        alias /usr/share/nginx/html/vue1/;
        index  index.html ;
        # 注意这里的url ，不加这个项目刷新会出问题哦，具体原因不展开讲了
        try_files $uri /vue1/index.html ;
    }

 

至此，配置就完成了总结其实就是配置 publicPath  和 vueRouter 的 base 属性 ，然后配置 nginx 的配置文件，如果还有 vue2.vue3 项目，按照这种配置，同一个域名下可以随便部署多个 vue 项目。