同一域名下部署多个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 中配置的一样。

 

配置Nginx

把打包后的文件夹 （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 项目。