当前位置: 首页 > 工具软件 > base-x > 使用案例 >

vue-cli3.x 项目配置基本路径 base

黄俊雄
2023-12-01

今天运维同学提出一个需求,在访问前端项目的时候,需要添加一个基础路径,用来区别其他的前端项目。案例:http://xxx.com/test/ ,需要前端配置一下 /test/ 作为这个项目的基础路径。

具体步骤如下:
1、在定义路由的时候,配置一下 base 属性,这个属性默认值是根目录也就是 base:‘/’ ,我们需要将根目录替换成 /test/

const router = new Router({
	mode:'history',
	base:'/test/',
	routes
})

2、在根目录 /src 下创建 vue.config.js 文件

module.exports = {
  baseUrl: '/test/', //根路径
  outputDir: 'dist', //打包的时候生成的一个文件名
  lintOnSave: false,//是否开启严格模式
  productionSourceMap: false, //设置生产环境的 source map 开启与关闭
  devServer: {//端口
  	port: 8888
  }
}

特别注意:在第二步的时候,由于 vue-cli3.3 版本以后 baseUrl 被废除了, 需要使用 publicPath 替换。

友情链接:vue-cli2.x 基础路径配置

 类似资料: