1、在不同的环境变量文件中放置我们需要的参数

.env.production 这个文件配置的是生产环境的变量，放置线上访问的路径

VUE_APP_URL=https://cli.vuejs.org/

.env.development 这个文件配置的是开发环境的变量，可以让我们在本地访问线上的路径

VUE_APP_URL=https://cli.vuejs.org/

2、# 根据vue cli 官网的描述，创建vue.config.js文件配置参数

// 这个地方的参数配置可以参照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），但是暂时没有什么效果}},}}
}

3、创建mock.api.js文件，用来集中放置接口

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; // 直接声明出去

4、在main.js 中引入 mock.api.js

import './mock.api'; // 接口API

5、使用api接口

在components文件夹下创建login.vue

<script>export default{mounted() {console.log(this.$api_router.login); // 打印出登录接口的路径},}
</script>

Vue生产环境和开发环境的配置相关推荐

vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
Vue cli3配置生产环境，开发环境，和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
(17/24) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换
(17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换 1. 概述生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.jso ...
生产环境和开发环境_环境部署：开发、测试和线上环境的区别
点击蓝字关注我们软件开发环境(Software Development Environment,SDE)是指在基本硬件和宿主软件的基础上,为支持系统软件和应用软件的工程化开发和维护而使用的一组软件 ...
31 SpringBoot多环境的切换(生产环境、开发环境、测试环境)
参考链接: Spring官网 Spring官网外部配置加载顺序的说明 SpringBoot多环境的切换(生产环境.开发环境.测试环境)_周太阳的博客-CSDN博客_springboot测试生产环境切 ...
项目开发过程中什么是生产环境、UAT环境、仿真环境、开发环境、测试环境？
开发环境,测试环境,生产环境也可以说是系统开发的三个阶段:开发->测试->上线,其中生产环境也就是通常说的真实环境. 执行步骤:开发完成,测试环境测试,保证程序没有问题后,再上传到生产环境 ...
webpack4生产环境和开发环境的对比
前言近期一直在看webpack4的文档,于是给自己做了这个总结,对比一下生产环境和开发环境的区别. 开发环境在项目开发过程中,我们关注的是能否追溯到代码的错误来源,能够及时刷新页面让我们看到代码的 ...
iOS的DeviceToken随生产环境和开发环境变化
http://www.jianshu.com/p/a80535716e3a 这两天研究推送功能,有一个问题一直困扰着我,就是Device token会变化当我用XCode直接运行到手机上的时候,De ...

Vue生产环境和开发环境的配置

1、在不同的环境变量文件中放置我们需要的参数

2、# 根据vue cli 官网的描述，创建vue.config.js文件配置参数

3、创建mock.api.js文件，用来集中放置接口

4、在main.js 中引入 mock.api.js

5、使用api接口

Vue生产环境和开发环境的配置相关推荐

最新文章

热门文章