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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
开启BootStrap学习之旅
May 04 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python实现按日期归档文件
2021/01/30 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
2014自主招生自荐信策略
2014/01/27 职场文书
推荐信格式要求
2014/05/09 职场文书
团队精神口号
2014/06/06 职场文书
品质口号大全
2014/06/17 职场文书
文案策划专业自荐信
2014/07/07 职场文书
学风建设演讲稿
2014/09/12 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers