vue-cli3打包后分离配置文件

jonh_felix 发布于2019-08-23 13:54 / 1194人阅读

摘要：下将请求地址的配置文件分离出来以便于打包后可动态修改请求地址基本思路在文件下新建在中请求文件，设置全局存储到中请求路径就直接用就可以了。

vue-cli3下将请求地址的配置文件分离出来以便于打包后可动态修改请求地址;
基本思路：
1.在public文件下新建serverConfig.json
`{
"production":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl",
"develop":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl"
}`;
2.在main.js中请求serverConfig.json文件，
`function getServerConfig () {
return new Promise ((resolve, reject) => {

axios.get("./serverConfig.json").then((result) => {
  let config = result.data;
  let ajaxUrl = process.env.NODE_ENV == "production" ? config.production:config.develop;
  Vue.prototype.$ajaxUrl=ajaxUrl; //设置全局
  store.commit("setAjaxUrl",ajaxUrl);//存储到vuex中
  resolve();
}).catch((error) => {
  console.log(error)
  reject()
})

})
}
async function init() {
await getServerConfig();
new Vue({

router,
store,
render: h => h(App),

}).$mount("#app")
}
init();
`
请求路径就直接用$ajaxUrl就可以了。
只所以存储到vuex中，是因为，如果你封装了request请求，无法直接获取到请求的地址，也无法用到全局$ajaxUrl，只能从vuex中获取，如果没有封装，直接用$ajaxUrl就可以

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99763.html

基于webpack模仿vue-cli（简略版）工程化

摘要：但高度封装的带来方便的同时，很多人却很少去关注轮子的内部结构，以至于当使用需要手动配置一些东西如编译实现代码压缩，移动端适配等配置的时候往往无从下手。废话不多说，下面我们来看看如何基于模仿实现项目工程化。从零搭建vue-cli 原创不易，如需转载请联系作者并注明出处 vue-cli的出现为vue工程化前端开发工作流提供了开箱即用的构建配置，减轻了烦人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 评论0 收藏0
vue-cli#4.7项目结构分析

摘要：前言使用过进行项目开发的同学，一定知道或者使用过脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。对象提供一系列属性，用于返回系统信息返回当前进程的命令行参数数组。前言使用过 vue 进行项目开发的同学，一定知道或者使用过 vue-cli 脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。也正是因为这样，很多时候我们会因为项目...

EastWoodYang 2019-08-22 17:09 评论0 收藏0
ONE-sys 整合前后端脚手架 koa2 + pm2 + vue-cli3.0 + element

摘要：项目地址干货求本脚手架主要致力于前端工程师的快速开发一键部署等快捷开发框架，主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。项目地址https://github.com/fanshyiis/... 干货！求star showImg(https://segmentfault.com/img/remote/1460000017886870); 本脚手架主要致力于...

刘福 2019-07-25 14:37 评论0 收藏0
vue-cli中配置webpack系列文章七 ------ webpack.prod.conf.js

webpack.prod.conf.js var path = require(path) var utils = require(./utils) var webpack = require(webpack) var config = require(../config) var merge = require(webpack-merge) var baseWebpack...

ShowerSun 2019-08-26 13:51 评论0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

huhud 2019-08-02 16:07 评论0 收藏0