从webpack打包结构中我们知道，vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。

具体的方法如下：

1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js

┌── build

├── config

├── node_modules

├── src

├── static

│ ├── config.js // 配置文件

│

├── index.html:

2.然后在创建的config.js配置文件中，声明一个对象api，将它赋值给window，对象名字随便取，只要不占用关键字即可，对象中存放你所需要配置的各种路径和数据，如下：

window.api = {

  apiURL: 'http://xxx.xxx.xxx.xxx:xxxx',

  websocketURL: 'ws://xxx.xxx.xxx.xxx:xxxx/websocket'

}

3.将此配置文件在index.html 文件中引入

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试</title>

<script src="static/config.js"></script>

</head>

<body>

<div id="app"></div>

</body>

</html>

4.使用到这里相信会一点vue基础知识的同学都知道怎么在项目中使用我们配置的数据,比如我们要配置axios请求路径如下：

（这里是因为我配置了开发环境,而且在开发环境获取不到window.api，所以只有在打包后才好使）

const service = axios.create({

  // baseURL: process.env.BASE_API, // api的base_url

  baseURL: process.env.NODE_ENV === 'production' ? window.api.apiURL : process.env.BASE_API,

  timeout: 20000

})

到此，项目的配置文件就已经设置好了，这样测试环境和正式环境的切换，或以后后台服务器要迁移和域名更换等，就可以直接在配置文件中修改，而不用重新打包部署。

需要注意一点，每次更改了配置文件，就需要重新进入一下项目，也就是重新刷新一下首页，让配置文件重新引入一次，这样修改才会生效。

vue项目webpack打包后修改配置文件的更多相关文章

  1. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  2. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

  3. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  4. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  5. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  6. vue项目webpack打包后有的文件big 问题

    vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如sea ...

  7. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

  8. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  9. Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

随机推荐

  1. 5V 升压 8.4V，5V 转 8.4V 做两节锂电池充电芯片

    5V 升压 8.4V SOT23-6 封装的六脚升压 IC PW5300 是一颗 DC-DC 异步整流升压转换器芯片,输入电压范围 2.6V-5.5V.最高输出 电压 12V, PW5300 是一种电 ...

  2. 每月一更的《HelloGitHub》第 58 期，来啦！

    HelloGitHub 分享 GitHub 上有趣.入门级的开源项目.欢迎大家: 贡献代码 宣传你觉得优秀的项目 Star 项目️ 本月刊是每月 28 号更新,再见月刊就是年后了.在这里提前祝大家:新 ...

  3. 内存空间有限情况下的词频统计 Trie树 前缀树

    数据结构与算法专题--第十二题 Trie树 https://mp.weixin.qq.com/s/nndr2AcECuUatXrxd3MgCg

  4. 签名 sign key 纸质邮件 历史 RSA诞生历史

    API接口签名校验,如何安全保存appsecret? - 知乎  https://www.zhihu.com/question/40855191 要保证一般的客户端-服务器通信安全,可以使用3个密钥. ...

  5. TCMalloc源码学习（四）（小内存块释放）

    pagemap_和pagemap_cache_ PageHeap有两个map,pagemap_记录某一内存页对应哪一个span,显然可能多页对应一个span,pagemap_cache_记录某一内存页 ...

  6. EasyConnect连接成功后，虚拟ip地位未分配

    文章目录 #问题描述: 今天公司做项目,连接上EasyConnect以后,显示连接成功,但是虚拟ip地址未分配,导致无法远程连接数据库,以及svn无法更新项目. #解决办法: 百度网上各种解决办法,没 ...

  7. SpringBoot启动方式，Spring Boot 定义系统启动任务

    SpringBoot启动方式,Spring Boot 定义系统启动任务 SpringBoot启动方式 1.1 方法一 1.2 方法二 1.2.1 start.sh 1.2.2 stop.sh 1.2. ...

  8. Spring框架——事务管理方式搭建一个小的项目

    学习Spring框架,通过事务管理的方式搭建一个小的项目,该项目可以查询对数据库中的图书库存数量进行修改. 首先,使用MVC分层的设计模式思想搭建项目目录结构. 此部分代码源码之中都有相关注释,所以尽 ...

  9. 设计模式c++（1）

    本来是想把之前的<head first设计模式>看了,不过因为这本书是java实现的,跟c++还是略有区别. 于是找了一下,发现了一个不错的blog,打算连书带blog一起参考着看了. b ...

  10. 8. Linux重要的环境变量

    1.Linux 系统执行命令的4个步骤 第 1 步:判断用户是否以绝对路径或相对路径的方式输入命令(如/bin/ls),如果是的话则直接执行.  第 2 步:Linux 系统检查用户输入的命令是否为& ...