从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. Git安装/VScode+Git+Github

    Git安装/VScode+Git+Github 1. 相关简介 git 版本控制工具,支持该工具的网站有Github.BitBucket.Gitorious.国内的OS China仓库.Csdn仓库等 ...

  2. MySQL ---- 锁知识

    锁 我们知道mysql中支持很多个存储引擎,在不同的存储引擎下所能支持的锁是不同的,我们通过MyISAM和InnoDB来进行一下对比. 表级锁定(table-level) ​ 表级别的锁定是MySQL ...

  3. CNN可视化技术总结（一）--特征图可视化

    导言: 在CV很多方向所谓改进模型,改进网络,都是在按照人的主观思想在改进,常常在说CNN的本质是提取特征,但并不知道它提取了什么特征,哪些区域对于识别真正起作用,也不知道网络是根据什么得出了分类结果 ...

  4. JavaScript中函数的this指向!

    JavaScript的this的指向问题! 这是我自己敲的, 报错! <button>点击查看绑定事件的this指向!</button> <script> // 函 ...

  5. nginx proxy pass redirects ignore port

    nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...

  6. 关于notepad++不能设置中文的解决方法

    好久没用notepad++了,最近遇到一个base64的音频文件,想起来notepad++挺好用的 于是安装好 然后发现 最新的notepad++竟然不能显示中文界面 这怎么可以呢! 上网搜 果然 作 ...

  7. Canvas实现弧线时钟

    最近试着用canvas元素的2d绘图函数做了一个弧线形的时钟. 我也没啥好说的,直接上代码: <div id="myclock"></div> <sc ...

  8. Linux环境Hive安装配置及使用

    Linux环境Hive安装配置及使用 一.Hive Hive环境前提 二.Hive架构原理解析 三.Hive-1.2.2单机安装流程 (1) 解压apache-hive-1.2.2-bin.tar.g ...

  9. Django（自定义过滤器和自定义标签）

    模版是一个用django模版语言标记过的python字符串.模版可以包含模版标签和变量. 模版标签是在一个模版里起作用的标记.比如,一个模版标签可以产生控制结构的内容(if或者for),可以获取数据库 ...

  10. 函数式编程(json、pickle、shelve)

    本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Py ...