vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象。
Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。
它允许我们更细粒度的控制其内部配置。接下来有一个在 vue.config.js
中的 chainWebpack修改的例子。
// 直接引用node中自带的模块 const path = require('path'); // __dirname 总是指向被执行 js 文件的绝对路径,也就是说你在E:\web\test\vue.config.js中写__dirname那么路径就是E:\web\test
function resolve (dir) { // 例如path.join(__dirname,'src')输出 E:\web\test\src
return path.join(__dirname, dir) } module.exports = {
// 设置代理
devServer: {
port: 8080,
proxy: {
"/gateway": {
target: "http://aaa.com/",
changeOrigin: true,
pathRewrite: {
"^/app/": "/app/"
}
}
}
},
// 设置是否在开发环境下每次保存代码时都启用eslint
验证。
// true 开启每次保存都进行检测,效果与warning一样
lintOnSave: true,
chainWebpack: config => {
config.resolve.alias
.set("home", resolve("src/views/home"))
.set("utils", resolve("src/utils"))
}
};
官方的文档中写到:
配置 resolve 别名
config.resolve.alias : ChainedMap config.resolve.alias
.set(key, value)
.set(key, value)
.delete(key)
.clear()
resolve的的一个属性alias(别名)。
在这里,我们在全局配只一个别名,这样我们在其它地方在调用home目录里的文件时,我们就可以省下一些路径,直接用home代替就好啦例如
例如下面的图片是我的src下面的目录
这里是我router.js的引用。
是不是 看起来就方便了很多呢!
以上就是我的理解,希望大家多多提出意见!
vue cli 中关于vue.config.js中chainWebpack的配置的更多相关文章
- vue-cli 如何配置assetsPublicPath; vue.config.js如何更改assetsPublicPath配置;
问题: vue项目完成打包上线的时候遇到静态资源找不到的问题,网上很多解决办法都是基于vue-cli 2.x 来解决的,但从vue-cli 3.0以后,便舍弃了配置文件夹(便没有了config这个文件 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- MVC中处理Json和JS中处理Json对象
MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...
- vue --- 解读vue的中webpack.base.config.js
const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils ...
- Vue、webpack中默认的config.js、index.js 配置详情
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
- 配置webpack.config.js中的文件
webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
随机推荐
- 深度学习趣谈:什么是迁移学习?(附带Tensorflow代码实现)
一.迁移学习的概念 什么是迁移学习呢?迁移学习可以由下面的这张图来表示: 这张图最左边表示了迁移学习也就是把已经训练好的模型和权重直接纳入到新的数据集当中进行训练,但是我们只改变之前模型的分类器(全连 ...
- 关于git,无论是命令使用还是深入学习,看我总结就够了
周五了,又是划水的一下午,无意中在某号上发现了这样一张图,说的内容很简单,就是我们日常离不开的git,可能因为最近github宕机,网传服务器被盗的新闻把,让我瞬间产生了兴趣,就点进去看一下 大家能看 ...
- 题解 UVA1193 Radar Installation
原题 PDF OJ 思路 分析 因为半径d已经确定,所以对于每个点,我们可以算出它在x 轴上的覆盖位置线段LR,如图. 此问题便转为: 对于 n 个区间,每个区间内至少有1个点,求最少点数. 算法 我 ...
- JMS资源文件下载列表
网关程序(Gateway) https://files.cnblogs.com/files/IWings/Gateway.zip 网关裁判程序(GatewayReferee) https://file ...
- 学习 bypass csp记录
最近看到一篇bypas csp的记录复现学习下 配置csp 这里直接设置html头达到配置csp的效果. Content-Security-Policy: script-src 'self' 'uns ...
- 如何查看预收录在arXiv上论文的LaTeX源文件并编译
arXiv 是一个收集物理学.数学.计算机科学与生物学论文预印本的网站. 对于理科生来说,经常需要在上面搜索下载一些论文,正常情况下,一般人下载的只是 pdf 文件,其实可以在 arXiv 上下载编译 ...
- 日志分析-利用grep,awk等文本处理工具完成(2019-4-9)
0x00 基础日志分析命令 1. tail - 监控末尾日志的变化 $tail -n 10 error2019.log #显示最后10行日志内容 $tail -n +5 nginx2019.log # ...
- Bug--slfj4依赖冲突
SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/F:/Spring%20p ...
- Spring学习之Spring与Mybatis的两种整合方式
本机使用IDEA 2020.1.MySql 8.0.19,通过Maven进行构建 环境准备 导入maven依赖包 <dependencies> <dependency> < ...
- MacOS SVN简单入门
背景:MacOS内置了SVN的客户端和服务器端的软件,下边所使用到的目录需要结合自己电脑的具体情况进行设置,并不是很困难. MacOS SVN简单入门 第一部分,创建本地的SVN测试仓库,并修改相应的 ...