Vue项目中对index.html中BASE_URL的配置方式
Vue项目对index.html中BASE_URL的配置
问题
有时候后端配置资源的默认访问路径的时候，可能会与前端打包时配置的默认根路径有所差异
比如：后端要访问静态资源的根路径为/static，而一般情况下，我们项目的vue.config.js中对BAES_URL的配置是/，或者不做配置，因为它默认的值也是/
这个路径决定了我们的前端项目打包后获取静态资源的默认的根路径（不显示在代码中），同时，这个路径也在public/index.html中有明显的引用，大多时候都会看到如下的代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.png" rel="external nofollow" >
<title>xxxx</title>
</head>
<body>
<div>.......</div>
</body>
</html>
那么，我们应该如何去修改这个BAE_URL的值呢？
解决
通过 vue-cli3 官方文档的查阅，发现：
所以，显而易见，如果想修改 BASE_URL，
Vue CLI 3.3 之前的版本，配置：baseURl: '/static'
Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'
因为这个值在开发环境下同样生效，所以说这么一改打包后是没问题了，但自己的项目运行起来却会报错，官方也给出了方案。很简单，只需要判断一下当前环境是生产环境还是开发环境，再应用不同的路径就可以了。如下：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/static/'
: '/'
}
注意：
还需要注意的一个问题是，当我们修改了publicPath 之后，如果我们对路由的配置是像下面这样：
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap.concat(asyncRouterMap)
})
可以看到路由的基础路径跟 BASE_URL 即 publicPath 是相同的。
如果保持原来的配置，那么所有的路由都会带上多余的前缀，如:/static/home
修改方式也很简单，如下：
Vue.use(Router)
export default new Router({
mode: 'history',
// base: process.env.BASE_URL,
base: '/',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap.concat(asyncRouterMap)
})
将base属性重置为/即可
Vue项目url中的＜%= BASE_URL %＞
vue-cli 创建的一个项目中执行命令 vue inspect > output.js 将 vue-cli 中 webpack 的配置信息导出到 output.js 文件，会有一段代码：
new DefinePlugin(
{
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}
),
在 webpack 中全局声明了 BASE_URL 这个变量为项目根目录。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。
原文出处：https://blog.csdn.net/wanghuan1020/article/details/108536334
相关文章
- 这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16