同一域名下部署多个vue项目
同一域名下部署多个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
同一域名下部署多个vue项目相关推荐
- nginx同一域名下部署多个vue项目
-----------nginx同一域名下部署多个vue项目------------------------ 1.目的 实现nginx服务端同一域名下部署多个vue项目. 2. 实例 pmobile项 ...
- 使用 nginx 同域名下部署多个 vue 项目,并使用反向代理
花了 3 天时间,趁着我还没有忘记,先记录下来 效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出 ...
- 同一域名端口下,通过nginx部署多个vue项目
情景介绍 服务器上80端口已部署一套vue项目,现在乃至未来还可能要部署n个前端项目,而已部署的项目的nginx的配置不能修改 项目配置 假设需要部署的第二个vue项目是放在服务器的 "p ...
- 阿里云 部署SpringBoot和Vue项目 亲测可用(第一次部署经验贴)
阿里云 部署SpringBoot和Vue项目 亲测可用!第一次部署经验贴! 前言:与伙伴一起写了一个项目,但是由于老师要我们部署到服务器上,而我从未有部署过,查看了csdn很多博客,试了好多篇,才成功 ...
- java 同域名下怎么访问同事的项目_喜大普奔,两个开源的前后端分离项目可以在线体验了...
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和V 部落上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了,以帮助 ...
- 从购置阿里云学生机到开发部署一个SpringBoot+Vue项目全过程
如题,本文旨在记录自己从开发到部署一个项目的过程中遇到的问题和解决方案,也可以作为下一次开发部署的参考.因为这个文档是之后写的,可能细节上会有点偏差,欢迎指正. 购置阿里云学生机 阿里云云翼计划 这里 ...
- vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- Nginx下同域部署多个Vue项目(history路由模式),报404、500错误
主要内容 一.环境 二.问题描述 三.问题解决 1.修改vue项目中的vue.config.js文件 2.修改Nginx的nginx.conf配置文件 3.Nginx目录结构 一.环境 系统: win ...
- 部署SpringBoot+SpringCloud+Vue项目——半途而废版
概述 这是一篇烂文章,本来准备记录自己部署项目的过程,结果出了一大堆问题,搞了一天!! 先介绍了自己怎么做的,然后疯狂找问题,各种出错,再加上不知道什么原因,服务器屡屡崩塌,真是气煞我也!搞了一天都在 ...
最新文章
- 一文看懂模糊搜索1.0到3.0的算法迭代历程
- innodb表 手工导入导出
- python的继承模式_Python之继承--增加新功能,不更改以前的代码
- MySQL第6天:MySQL的架构介绍之逻辑架构
- 关于私有云与存储风向的深度解读
- 深度学习-机器学习(5.3支持向量机Python的应用)
- 回归树与基于规则的模型(part2)--简单回归树
- 制作mac系统安装U盘
- java线程条件变量_使用条件变量(多线程笔记)
- 虚拟主机安装mysql_如何虚拟主机安装mysql
- c语言把数据存放在文件中,急求如何将下列C语言程序数据存储到文件中?
- java时间日期类(Date、DateFormat、Calendar)学习
- spark checkpoint
- [ZT]javascript window resize 窗口改变事件
- Java Maps的9个常见问题
- java发送qq邮件
- pdf转换器下载使用步骤
- 华为千亿美金年报里的5G、AI、云计算
- apkeditor pro_APK编辑器 APK Editor Pro v1.15.0 + ApkModifier v3.6
- java closed_有关Java中isClosed()和isConnected()的一些误解
热门文章
- 工商银行黄金开户问答题答案
- UML建模系列文章总结 [转]
- Magento 获取系统设置 How to get data from Magento System Configuration
- PHP开发人员常犯的10个MysqL错误
- Python_共轭梯度法与最速下降法之间的比较
- pdb 调试python
- 使用find命令查找文件
- UnicodeDecodeError(转)
- MxNet 迁移学习实现深度学习分类
- SpringBoot—JPA: javax.persistence.TransactionRequiredException