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

水深无声 2023-02-13 11:21 14阅读 0赞

# 同一域名下部署多个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 项目。

*原文链接：https://blog.csdn.net/u012549055/article/details/105896729*