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{}即可。
最后实现的效果为:
此处用于个人记录,后续避免忘记,如有问题,欢迎指出,谢谢。