linux服务器上部署多个vue项目（使用相同的ip（域名）及端口号）

嘻嘻哈jl

已于 2022-03-17 14:20:14 修改

阅读量4k

点赞数

分类专栏： vue 文章标签： linux vue.js 服务器

于 2022-03-17 14:15:18 首次发布

本文链接：https://blog.csdn.net/weixin_42389270/article/details/123548182

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

linux服务器上部署多个vue（vue2.0）项目（使用相同的ip（域名）及端口号）

1、首先想要实现的效果为：
http://ip:端口号/a[注：a代表a项目]
http://ip:端口号/b[注：b代表b项目]
2、linux的文件路径为
在这里插入图片描述

3、此时需要做的是：
1）在config的index.js文件中，build属性下加assetsPublicPath，如图：
在这里插入图片描述

2）在src/router/index.js文件中，加上base，此时可以将mode改为“history”，默认为“hash”模式，即“#”访问页面，根据自己的使用情况操作
在这里插入图片描述

3）如果自己在本地测试的时候，为了解决跨域问题，在dev配置中加了proxyTable，那么build之前需要处理一下。【此处两种处理方式】
在这里插入图片描述

a:将src/request/request.js下的baseUrl进行更改（即创建axios实例的地方），不使用解决跨域的代理路径“api”，直接使用正常的ip及端口形式，如下图，将其他涉及到路径（ip）的地方都进行更改，例如我的main.js
在这里插入图片描述
b:将config的index.js中的build属性加上相同的proxyTable配置，然后配合nginx的代理转发一起实现（无实际操作，不知还有什么坑，后续接触了再补）

//linux中增加的配置
location ~* /api { 
		proxy_pass  http://ip:8083;
	}

4、进行build处理，将编译后的dist文件夹下的内容放到linux系统a文件夹下，如果带着dist文件夹，那么之前配置的路径等信息都需要加上dist，例如assetsPublicPath的配置为：/a/dist/.最后修改编译后的dist下的index.html文件

<!DOCTYPE html>
<html>
<head>
<meta base=/a/><!--增加此处配置信息，与之前定义的路径一致-->
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>a</title><link href=/a/static/css/app.b9172fa37c56ebe03fffaf413d30c12d.css rel=stylesheet></head>
<body>
  <div id=app></div>
  <script type=text/javascript src=/a/static/js/manifest.6c8c0435b235f19ec870.js></script>
  <script type=text/javascript src=/a/static/js/vendor.588a2c5fb54e696879ae.js></script>
  <script type=text/javascript src=/a/static/js/app.09473ba2a6198763771f.js></script>
</body>
</html>

5、nginx的配置：如下图，想要放在80端口下，因为之前设置了root的路径到fronted文件夹下，所以将a文件夹创建在了该文件夹下面，配置location ^~/a{}即可。
在这里插入图片描述
最后实现的效果为：

此处用于个人记录，后续避免忘记，如有问题，欢迎指出，谢谢。

嘻嘻哈jl

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
linux服务器上部署多个vue项目（使用相同的ip（域名）及端口号）

linux服务器上部署多个vue（vue2.0）项目（使用相同的ip（域名）及端口号）1、首先想要实现的效果为：http://ip:端口号/a[注：a代表a项目]http://ip:端口号/b[注：b代表b项目]2、linux的文件路径为3、此时需要做的是：1）在config的index.js文件中，build属性下加assetsPublicPath，如图：2）在src/router/index.js文件中，加上base，此时可以将mode改为“history”，默认为“hash”模式，即
复制链接

扫一扫