<强>一些牢骚
前端的世界真的太奇妙,更新速度真的跟火箭一样,没有一颗真正热爱它的心,真的很难继续走下去。前段时间节点之父Ryan Dahl发布新的开源项目deno,受到了大量的关注.Ryan达尔直言节点是一个失败品,充斥很多bug和设计上的不合理,导致他也无力回天.....天啦撸,可怜我们这种小前端,节点还没开始,马上就要结束了....
好的吧,牢骚归牢骚,生活还得继续。生命不息,撸码不止。
<强> webpack4
最近在一个项目中,将vue-cli更新到了最新版的3. x。同时webpack也更新到4.了x.webpack4在一些配置上有了很大一部分的精简。据说是受到了最近蛮火的0配置开箱即用的打包工具包裹的影响,官方也觉得webpack配置有点繁琐。(尝试了一下,在一些小项目中,确实很爽).webpack4具体更新细节可以在官网上看的到,这边就不贴了.webpack4文档
<强> vue-cli 3. x
使用新版的vue-cli构建出来的项目目录也是非常清爽。我这边在构建的时候选的是手动功能。
然后在项目打包执行线构建的时候,打开dist目录的index . html发现资源没有正确加载。
立即联想到需要改输入路径的地址。却尴尬的发现之前的构建和配置文件夹不见了。查阅后发现如果需要自定义配置,需要在项目的根目录添加一个Vue.config.js。在这个文件中,我们可以进行一些个性化定制。
模块。出口={//基本路径
baseUrl:“。/?/生产环境是否生成sourceMap文件
productionSourceMap:假的,//服务器端口号
devServer: {
端口:1234
}，
}
和以前的操作一样在/前面直接加上。就行了
<强>详细配置
模块。出口={//基本路径
baseUrl: '/',//输出文件目录
outputDir:“距离”,//eslint-loader是否在保存的时候检查
lintOnSave:没错,//使用完整的构建与浏览器编译器# 63;//https://vuejs.org/v2/guide/installation.html Runtime-Compiler-vs-Runtime-only
编译器:假的,//webpack配置//参见https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack:()=比;{},
configureWebpack:()=比;{},//vue-loader配置项//https://vue-loader.vuejs.org/en/options.html
vueLoader: {},//生产环境是否生成sourceMap文件
productionSourceMap:没错,//css相关配置
css: {//是否使用css分离插件ExtractTextPlugin
精华:没错,//开启源地图CSS # 63;
sourceMap:假的,//css预设器配置项
loaderOptions: {},//启用CSS预处理程序模块为所有CSS/文件。
模块:假
}，//使用thread-loader巴别塔,TS在生产建设//默认启用如果机器有超过1核心
并行:要求(os) .cpus()。长度比;1，//是否启用dll//https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md dll-mode见
dll:假的,//PWA插件相关配置//参见https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},//webpack-dev-server相关配置
devServer: {
开放:过程。平台===按锒摹?
主持人:“0.0.0.0”,
端口:8080
https:假的,
紧随:假的,
代理:null,//设置代理
:应用=比;{}
}，//第三方插件配置
pluginOptions: {//?
}
}
以上这篇vue-cli 3。x修改dist路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
