本篇文章不提供如何在服务器上安装nginx以及Vue打包,相关内容请参考我另外一篇文章:
将Vue项目部署到服务器
注:我的Vue-cli版本为4.5+,如果不是4+的版本,那可能文件位置有所不同,仅作参考。
前提:我们需要配置两个vue项目,一个是直接用IP或者域名就可以访问,一个后面还接着/test。
第一个Vue项目访问地址:www.test.com
第二个Vue项目访问地址:www.test.com/test
- 步骤1:配置nginx.conf文件,该文件在nginx安装文件夹/conf目录下,如下所示,只展示需要配置的代码(加在http>server下):
注:alias的结尾必须有/
如何在服务器中修改文件可以参考我的另一篇文章:
云服务器安全(centos)之配置window下的SSH密钥免密登录
location / {
root /你的路径/dist/;
}
location /test {
alias /你的路径/dist/;
}
修改保存之后,进入nginx安装文件夹/sbin,执行命令:./nginx -s reload
注:于根路径访问的Vue项目,只需在nginx中配置即可,无需下面步骤
- 步骤2:于第二个Vue项目根目录下,创建
vue.config.js
,文件的内容如下:
module.exports = {
publicPath: '/test/'
}
因为我们第二个Vue项目的访问路径是:www.test.com/test
,所以这里填test,如果路径是www.test.com/example
,那么就是/example/
- 步骤3:于第二个Vue项目中的
路由router配置文件
中,代码如下:
const router = new VueRouter({
routes,
base: '/test'
})
找到创建VueRouter的地方,加上base即可,这里的test与步骤二同理。
步骤4:第二个Vue项目完成2、3步骤之后,重新打包dist
,推送至服务器即可!
2022/1/26,上个月升级Vue3+Vite+TS,配置方法大同小异,好像不需要在vite里面配置了,Vue Route中的配置如下:
import { ...,createWebHashHistory } from 'vue-router'
...路由相关代码
const router = createRouter({
history: createWebHashHistory('/test'),
routes
})