vue.js打包生成配置文件(参考)

第一步:安装generate-asset-webpack-plugin插件

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

第二步:配置build/webpack.prod.conf.js文件

//打包时输出可配置文件
const GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘)
const createServerConfig = function (compilation) {
  let cfgJson = {
    ApiUrl: "http://192.168.0.100:3001"
  }
  return JSON.stringify(cfgJson)
}

搜索plugins并添加以下代码

//打包时输入配置
new GenerateAssetPlugin({
  filename: ‘serverconfig.json‘,
  fn: (compilation, cb) => {
    cb(null, createServerConfig(compilation));
  },
  extraFiles: []
}),

第三步:在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)
    });
}

第五步:在app.vue里面调用getConfigJson()获取ApiUrl,使用时直接使用 this.ApiUrl+‘/api/‘ 进行调用

//调用getConfigJson()获取ApiUrl
mounted: function() {
  this.getConfigJson();
}

第六步:输入npm run build进行打包,并查看dist文件夹下的serverconfig.json文件,通过修改配置文件实现域名修改

原文地址:https://www.cnblogs.com/chendongbky/p/9939958.html

时间: 2024-11-07 15:26:14

vue.js打包生成配置文件(参考)的相关文章

vue.js 打包时出现空白页和路径错误

vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

vue中打包生成可配置文件以便修改接口地址

vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求json文件,试过之后发现了问题:这个实际是需要在其他后端接口请求之前就返回接口地址.然后再进行其他一系列如登陆,获取用户信息等接口请求. 其实是需要同步操作的,在这个完成成功之后再进行其他一系列操作才对,于是乎,就想要不要试试promise等方法把异步变同步来进行操作?but,由于之前已经封装好了

vue.js 插件生成excel

https://www.csdn.net/gather_2f/MtTaAg2sOTUyNC1ibG9n.html 参考地址先安装 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 获取ecexl文件 https://pan.baidu.com/s/1X0CCKwnOcv4U9J6unpZNEA 密码:iid Export2Excel.js中修改引入的文件地址 req

Vue.js——打包之后资源路径产生问题

https://blog.csdn.net/qq_30632003/article/details/79353035 https://www.cnblogs.com/diantao/p/7776523.html 对于url,下面的设置比较可行,通过 require 引入 <template> <div class="recImage"> <div :style="{backgroundImage:'url('+urlData+')'}"

开源干货!!!.NET Core + Vue.js(iview-admin) 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦!!!

DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯,是古希腊神话中的众神之王,奥林匹斯十二主神之首,统治宇宙万物的至高无上的主神(在古希腊神话中主神专指宙斯),人们常用"众神和人类的父亲"."神王"来称呼他,是希腊神话诸神中最伟大的神. DncZeus的愿景就是做一个.NET Core 领域的简易精致的通用后台权限管理模

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

Vue.js 是什么

Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框

beego+vue.js分离开发,结合发布,简单部署

大家知道,golang开发的东西部署简单是它很大的卖点,一般的应用,生成的可执行文件直接放服务器上运行即可,不需要任何环境.当然,大型的应用才需要比如mysql,nginx等.但是当vue.js出现后,前端几乎都是它(vue.js)的天下了,因为用了vue.js就回不去了,无法再回到beego的view里写tpl或html页面了,很受伤,没办法,vue.js实在太方便了,所谓双向绑定,这是神马概念,百度吧,我也讲不清楚-- 之前很懵逼,将vue.js开发的前端,完完全全独立地部署在云上(用ngi

Vue.js简单入门

这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> &