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

最新推荐文章于 2023-11-28 19:14:16 发布

星河_赵梓宇

最新推荐文章于 2023-11-28 19:14:16 发布

阅读量2.2k

点赞数

文章标签： vue nginx

原文链接：https://blog.csdn.net/u012549055/article/details/105896729?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-8

版权

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