vue获取baseurl,vue baseurl 环境变量
本文主要介绍了Vue项目中index.html BASE _ URL的配置方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
在Vue项目url中<%=base _ URL% >解决了Vue项目index.html中BASE_url的配置问题。
Vue项目对index.html中BASE_URL的配置
问题
有时，当后端配置资源的默认访问路径时，它可能与前端打包时配置的默认根路径不同。
比如后端访问静态资源的根路径是/static，但一般情况下，我们项目的vue.config.js中BAES_URL的配置是/，或者因为默认值是/
这个路径决定了我们的前端项目在打包后获取静态资源的默认根路径(代码中没有显示)。同时，这个路径在public/index.html中也有明确的引用，大多数时候，你会看到下面的代码：
！声明文档类型
html lang=zh-cmn-Hans
头
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 no follow
标题xxxx/标题
/头
身体
差异./div
/body
/html
那么，我们应该如何修改这个BAE_URL的值呢？
解决
通过查阅vue-cli3的官方文档发现：
因此，很明显，如果您想修改BASE_URL，
vucli之前的版本，配置：base URL:“/static”
vuli以后的版本(包括3.3)，配置：public path:“/static”
因为这个值在开发环境中也是生效的，经过这样的改动和打包是没有问题的，但是你自己的项目运行的时候会报错，官方也给出了方案。很简单。只需判断当前环境是生产环境还是开发环境，然后应用不同的路径。如下所示：
模块.导出={
public path:process . ENV . node _ ENV=== production
？/static/
: /
}
注意：
另一个应该注意的问题是，在我们修改了publicPath之后，如果我们按如下方式配置路由：
导出默认新路由器({
模式：“历史”，
base: process.env.BASE_URL，
scrollBehavior: ()=({ y: 0 })，
路线：constantroutermap . concat(asyncRouterMap)
})
可以看到路由的基路径与BASE_URL相同，即publicPath。
如果保持原始配置，那么所有路由都将有冗余前缀，例如：/static/home。
修改方法也很简单，如下：
Vue.use(路由器)
导出默认新路由器({
模式：“历史”，
//base: process.env.BASE_URL，
基底：/，
scrollBehavior: ()=({ y: 0 })，
路线：constantroutermap . concat(asyncRouterMap)
})
只需将基本属性重置为/。
Vue项目url中的%= BASE_URL %
在vue-cli创建的项目中执行命令vue inspect output.js，将vue-cli中webpack的配置信息导出到output.js文件中，会有一段代码：
新定义插件(
{
process.env :
NODE_ENV:“开发”，
基本URL: /
}
}
),
在webpack中，变量BASE_URL被全局声明为项目的根目录。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。