解决方法:(共有2个方法)

1、借助插件  generate-asset-webpack-plugin 。在webpack.prod.conf.js中去生成configServer.json文件,让其在build的时候生成json文件,然后再使用axios异步获取json,替换url即可。

第一步:安装插架

npm install generate-asset-webpack-plugin --save-dev

第二步:配置 webpack.prod.config.js 文件

·让其打包的时候输出可配置的文件。

var GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘);
var createServerConfig = function(compilation){
let cfgJson={ApiUrl:"http://www.adoctors.cn"};
return JSON.stringify(cfgJson);
}
让其打包的时候输入可配置文件

new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
在我们输入 npm run build 打包之后,在根目录就会生成serverconfig.json文件。

第三步:如果有需要修改域名之类的  可在 serverConfig.json 修改

第四步:获取 ApiUrl

//在main.js中定义一个全局函数
Vue.prototype.getConfigJson=function(){
this.$http.get("serverconfig.json").then((result)=>{
//用一个全局字段保存ApiUrl 也可以用sessionStorage存储
Vue.prototype.ApiUrl=result.body.ApiUrl;
}).catch((error)=>{console.log(error)});
}

第五步:使用ApiUrl

//在app.vue里面 执行this.getConfigJson();
mounted:function(){
this.getConfigJson();
}
var url=this.ApiUrl+'/baidu/....
ApiUrl 在这里已经是全局的了 所以我们可以直接用 this.ApiUrl

2、第二个方法

此方法其实就是在 vue-cli 里把我们需要配置修改的文件直接进行抽离,不让 webpack 把配置文件进行编译。

第一步:在 static  文件夹下新建一个名为 config.js 的文件

接下来 就是配置 config 的内容啦

这里将所有的配置注入到window对象的一个属性里面,我们可以自定义这个属性

第二步:在index.html里面引入这个config.js

第三步:我们配置好之后就可直接调用

在我们打包之后 可以看到 config 文件会原样输出并没有被打包。 这样当我我们把项目交给部署人员的时候,部署人员可以直接通过该文件来修改配置内容啦。

vue配置外放generate-asset-webpack-plugin的更多相关文章

  1. webpack vue 配置

    vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...

  2. YYDS: Webpack Plugin开发

    目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...

  3. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  4. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  5. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  6. day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpack创建项目的玩法 五 element-ui的使用 六 xxx 七 xxx 八 xxx 一 ...

  7. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  8. vue 配置CDN加速

    1.首先index.html 中配置cdn 引入 <!-- 引入样式 --> <link rel="stylesheet" href="//cdn.bo ...

  9. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

随机推荐

  1. 【零基础】简单说说一键果体APP的AI

    参考: https://www.jianshu.com/p/8c7a7cb7198c https://blog.csdn.net/gdymind/article/details/82696481 零. ...

  2. 使用Pillow(PIL)库实现中文字符画

    上班摸鱼写的,不多说了,直接上脚本 #coding=utf-8 from PIL import Image from PIL import ImageDraw from PIL import Imag ...

  3. P4104 [HEOI2014]平衡

    友情提醒:取模太多真的会TLE!!! P4104 [HEOI2014]平衡 题解 本题属于 DP-整数划分 类问题中的 把整数 n 划分成 k 个不相同不大于 m 的正整数问题 设置DP状态  f[ ...

  4. ios-runtime拦截touch事件,展示用户触摸效果

    [展示效果说明] 对 app 操作录屏时,展示出手指在 app 上的触摸效果可以看到具体点击情况,感觉这样比较直观方便,也不用做视频后期了. 这里简单用 runtime 实现了一个这样的效果,不需要修 ...

  5. CentOS服务器安装部署Java环境(jdk,tomcat)

    第一步:卸载openjdk 用命令 java -version,如有下面的信息说明CentOS自带OpenJdk,没安装跳过这一步: 最好还是先卸载掉openjdk,再安装oracle公司的jdk.先 ...

  6. wait_timeout 和 interactive_timeout

    wait_timeout 和 interactive_timeout Table of Contents 1. 参数说明 2. 原代码 3. interactive_timeout覆盖wait_tim ...

  7. Android中代码优化

    两个基本准则: 1.不要做冗余的工作 2.尽量避免次数过多的内存分配操作 Handler和内部类的正确使用 正确使用Context 正确使用Java四种引用方式:软引用,弱引用,虚引用,强引用 避免创 ...

  8. WPF学习笔记 - 数据绑定(在代码中)

    在程序代码里,有两种设置绑定的方法,一种是调用FrameworkElement或FrameContentElement对象的SetBinding实例方法. 例如: Public MainWindow( ...

  9. 浏览器输入url后发生的事情以及每步可以做的优化

    首先总结下输入url按下回车后的大致流程: 查询url的ip地址. 建立tcp连接,连接服务器. 浏览器发起http/https请求. 服务器响应浏览器的请求. 网页的解析与渲染. 下面分析每个过程 ...

  10. RTSP协议-中文定义

    RTSP协议-中文定义 转自:http://blog.csdn.net/arau_sh/article/details/2982914 E-mail:bryanj@163.com 译者: Bryan. ...