vue中控制mock在开发环境使用,在生产环境禁用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue中控制mock在开发环境使用,在生产环境禁用
原因:mock拦截所有的axios请求,根据请求,做出相应的响应。平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据。
解决方案
第一步、我们设置mock在开发development
环境可用,在生产production
环境不可用。在vue中通过设置main.js
中的Vue.config.productionTip
来决定模式。默认为false
是生产环境。我们将其设置为true
即进入了开发环境,设置后,可在浏览器检查中看到You are runing Vue in development mode
如下图:
第二步、我们在config/dev.env.js
和config/prod.env.js
中设置变量。相当于同一个变量名,在不同的模式下,有不同的值。
// dev.env.js下的配置。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: true //开发环境使用mock
})
// prod.env.js下的配置
module.exports = {
NODE_ENV: '"production"',
MOCK: false // 生产环境禁用mock
}
同理,如果有其他在生产环境和开发环境取值不同的同名变量,可以定义在相应的文件中,如在axios
请求时,不同环境有不同的baseURL
,即可以设置。
第三步、在main.js
中设置process.env.MOCK && require("./mock/index.js")
。process.env.MOCK
这句就是判断刚才设置的值,如果是true
,才会执行语句引入mock,如果是false
,则后面的语句不执行,即不引入mock。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)