vue-cli 3.x 修改dist路径的方法


Posted in Javascript onSeptember 19, 2018

一些牢骚

前端的世界真的太奇妙,更新速度真的跟火箭一样。没有一颗真正热爱它的心,真的很难继续走下去。前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno,受到了大量的关注。Ryan Dahl直言node是一个失败品,充斥很多bug和设计上的不合理,导致他也无力回天。。。。。天啦撸,可怜我们这种小前端,node还没开始,马上就要结束了。。。。

vue-cli 3.x 修改dist路径的方法

好的吧,牢骚归牢骚,生活还得继续。生命不息,撸码不止。

webpack4

最近在一个项目中,将vue-cli更新到了最新版的3.x。同时webpack也更新到了4.x。webpack4在一些配置上有了很大一部分的精简。据说是受到了最近蛮火的0配置开箱即用的打包工具Parcel的影响,官方也觉得webpack配置有点繁琐。(尝试了一下,在一些小项目中,确实很爽)。webpack4具体更新细节可以在官网上看到,这边就不贴了。webpack4文档

vue-cli 3.x

使用新版的vue-cli构建出来的项目目录也是非常清爽。我这边在构建的时候选的是Manually features。

然后在项目打包执行yarn build的时候,打开dist目录的index.html发现资源没有正确加载。

vue-cli 3.x 修改dist路径的方法

立即联想到需要改输入路径的地址。却尴尬的发现之前的build和config文件夹不见了。查阅后发现如果需要自定义配置,需要在项目的 根目录添加一个Vue.config.js。在这个文件中,我们可以进行一些个性化定制。

module.exports = {
 // 基本路径
 baseUrl: './',
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: false,
 // 服务器端口号
 devServer: {
 port: 1234,
 },
}

和以前的操作一样 在/前面直接加上.就行了

详细配置

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see 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: true,
 // css相关配置
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: true,
 // 开启 CSS source maps?
 sourceMap: false,
 // css预设器配置项
 loaderOptions: {},
 // 启用 CSS modules for all css / pre-processor files.
 modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
 open: process.platform === 'darwin',
 host: '0.0.0.0',
 port: 8080,
 https: false,
 hotOnly: false,
 proxy: null, // 设置代理
 before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
 // ...
 }
}

以上这篇vue-cli 3.x 修改dist路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
js实现选项卡效果
Mar 07 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
浅谈React之状态(State)
Sep 19 #Javascript
jQuery使用each遍历循环的方法
Sep 19 #jQuery
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 #Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 #Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 #Javascript
vue.extend与vue.component的区别和联系
Sep 19 #Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 #Javascript
You might like
聊天室php&mysql(三)
2006/10/09 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python:socket传输大文件示例
2017/01/18 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python递归函数绘制分形树的方法
2018/06/22 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python实现飞机大战
2018/09/11 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
初中信息技术教学计划
2015/01/22 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android