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写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
随机推荐
- 三十二：WEB漏洞-文件操作之文件下载读取全解
文件下载读取 原路,检测,利用,修复 利用 数据库配置文件下载或者读取后续 接口密钥信息文件下载或者读取后续 文件名,参数值,目录符号 read.xxx?filename= down.xxx?file ...
- 在.NET Core 中实现健康检查
.NET Core中提供了开箱即用的运行状况检查,首先,我将在.NET Core API应用程序中执行运行状况检查,接下来,我们将使用DbContext集成SQL Server或数据库的运行状况检查, ...
- Python Debug工具
最近在github上冒出了一个python的debug神器PySnooper,号称在debug时可以消灭print.那么该工具有哪些优点呢,如何使用该工具呢.本文就介绍该工具的优缺点和使用方式. 前言 ...
- uni-app开发经验分享八： 实现微信APP支付的全过程详解
背景 最近项目使用uni-app实现微信支付,把过程简单记录下,帮助那些刚刚基础uni-app,苦于文档的同学们.整体来说实现过程和非uni-app的实现方式没有太大不同,难点就在于uni-app对于 ...
- 转 2 jmeter常用功能介绍-测试计划、线程组
2 jmeter常用功能介绍-测试计划.线程组 1.测试计划测试用来描述一个性能测试,所有内容都是基于这个测试计划的. (1)User Defined Variables:设置用户全局变量.一般添 ...
- HTML Standard系列：Event loop、requestIdleCallback 和 requestAnimationFrame
HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...
- Redis 常见问题总结
1. 简单介绍一下 Redis 呗! 简单来说 Redis 就是一个使用 C 语言开发的数据库,不过与传统数据库不同的是 Redis 的数据是存在内存中的 ,也就是它是内存数据库,所以读写速度非常快, ...
- 精通MySQL之锁篇
老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南.这份指南把大数据的[基础知识][框架分析][源码理解]都用自己的话描述出来,让 ...
- Jenkins （自动使用docker容器发布java.war +tomcat）
一.大概流程 因为目前没有找Jenkins 和docker 之间比较友好的插件,所以只能使用这种比较low 的方式来实现自动部署了. 1.Jenkins在gitlab拉取项目并编译. 2.将编译后的代 ...
- Spring MVC—拦截器，文件上传，中文乱码处理，Rest风格，异常处理机制
拦截器 文件上传 -中文乱码解决 rest风格 异常处理机制 拦截器 Spring MVC可以使用拦截器对请求进行拦截处理,用户可以自定义拦截器来实现特定的功能,自定义的拦截器必须实现HandlerI ...