vue项目部署到服务器二级目录

Shiki2147

已于 2022-03-09 16:45:38 修改

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 nginx

于 2022-03-09 09:42:51 首次发布

本文链接：https://blog.csdn.net/Shiki2147/article/details/123369274

版权

本文介绍了如何将Vue项目部署到服务器的二级目录下，以解决只有一个域名但需承载多个项目的需求。通过修改vue.config.js的`publicPath`为二级目录路径，如'/fr/'，并调整router.js中`base`属性。由于使用了history模式的路由，部署后可能出现刷新404问题，需要在nginx服务器配置相应规则来解决。

摘要由CSDN通过智能技术生成

vue项目部署到服务器二级目录

为啥要部署，因为域名只能用一个，但是项目有两个，所以得分开不同的目录
类似于
http://www.baidu.com/fr 是一个项目地址
http://www.baidu.com/fr2 是另一个项目地址

具体配置参照了网上的例子
前端需要在vue项目里面改一下配置：

webpack配置，vue.config.js文件
加一个
build：{
	assetsPublicPath: '/fr/'
}
或者
publicPath: '/fr/'


router.js里面
const router= new Router({
  // 打包项目子目录
  mode: 'history',
  base:'/fr/',     
  routes: []
})