根据vue cli 官网(https://cli.vuejs.org/zh/guide/mode-and- env.html#%E6%A8%A1%E5%BC%8F)的解释,我们可以直接在src同级目录下创建.env.development和.env.production,这个两个文件
.env.production 这个文件配置的是生产环境的变量,放置线上访问的路径
VUE_APP_URL=https://cli.vuejs.org/
.env.development 这个文件配置的是开发环境的变量,可以让我们在本地访问线上的路径
VUE_APP_URL=https://cli.vuejs.org/
// 这个地方的参数配置可以参照vue cli https://cli.vuejs.org/zh/config/#全局-cli-配置,根据项目需要进行配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path' : './',
outputDir: 'dist',
devServer: {
proxy: {
'/api': {
target: '线上接口地址',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/' // 根据之前vuejs的配置,用来拿掉URL上的(/api),但是暂时没有什么效果
}
},
}
}
}
import Vue from 'vue';
const api = process.env.VUE_APP_URL ? process.env.VUE_APP_URL : '/api';
export const APIROUTER = {
'login': api + '/admin/login.do', // 登录
}
Vue.prototype.$api_router = APIROUTER; // 直接声明出去
import './mock.api'; // 接口API
在components文件夹下创建login.vue
<script>
export default{
mounted() {
console.log(this.$api_router.login); // 打印出登录接口的路径
},
}
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有