vue项目webpack打包后修改配置文件
从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打包后修改配置文件的更多相关文章
- vue项目 webpack打包后，图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- vue项目webpack打包后图片路径错误
首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
- vue项目webpack打包后有的文件big 问题
vue项目打包的时候,有的big, 超过1M, 需要进行优化,方法有: 1. 非首屏图片,可以采用懒加载的方式, 如:图片的懒加载, vue中路由的懒加载 等 2. 各个模块, 采用如sea ...
- vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...
- vue和webpack打包 项目相对路径修改
一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...
- Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
随机推荐
- 1V转3V的低功耗升压芯片
由于1V的电压很低,如果需要1V转3V的芯片,也是能找到的,一般要输入电压要选择余量,选择比1V更低的启动电压的1V转3V升压芯片.PW5100干电池升压IC就具有1V转3V,稳压输出3.3V的 ...
- Python Debug工具
最近在github上冒出了一个python的debug神器PySnooper,号称在debug时可以消灭print.那么该工具有哪些优点呢,如何使用该工具呢.本文就介绍该工具的优缺点和使用方式. 前言 ...
- uni-app开发经验分享十一： uniapp iOS云打包修改权限提示语
打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝.Apple的原则是,如果一个app想要申请用户同意某个隐私信息访问 ...
- IE浏览器的卸载操作
1.首先进入打开这个 C:\Windows\TEMP\ 文件夹,将里面的所有文件都清空了. 2.依次点击"开始"-"所有程序"-"附件",右 ...
- Python Data Structure and Algorithms Tutorial
Python - Algorithm Design - Tutorialspoint https://www.tutorialspoint.com/python_data_structure/pyth ...
- Vue中双向数据绑定是如何实现的？
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变:核心:关于VUE双向数据绑定,其核心是 Ob ...
- 利用Javascript制作网页特效（窗口特效）
全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...
- Mybatis（二）实例练习
文章目录 实例练习Mybatis,实现一个简单的登录功能. 增.删.改:操作返回Int类型. 查询操作返回实体对象. 首先需要导入相关的包. #导包: #建表 在数据库中新建一个用户mybatis,然 ...
- ceph --- (简单操作及openstack交接)
部署ceph :https://www.cnblogs.com/cloudhere/p/10519647.html Centos7部署ceph:https://www.cnblogs.com/kevi ...
- 32.vsftpd服务程序--匿名开放模式
1.vsftpd服务程序 vsftpd 作为更加安全的文件传输的服务程序,允许用户以三种认证模式登录到FTP 服务器上. 匿名开放模式:是一种最不安全的认证模式,任何人都可以无需密码验证而直接登录到F ...