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 相关文章推荐
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Django Rest framework权限的详细用法
2019/07/25 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
给同事的道歉信
2014/01/11 职场文书
学校招生宣传广告词
2014/03/19 职场文书
诚实守信演讲稿
2014/09/01 职场文书
项目经理岗位职责
2015/01/31 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
python unittest单元测试的步骤分析
2021/08/02 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript