今天运维同学提出一个需求,在访问前端项目的时候,需要添加一个基础路径,用来区别其他的前端项目。案例: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 基础路径配置