Vue-cli3项目配置Vue.config.js实战记录


Posted in Javascript onJuly 29, 2018

Vue-cli3 搭建的项目 界面想对之前较为简洁

Vue-cli3项目配置Vue.config.js实战记录

之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js
文件(是根目录,不是src目录

语法

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-cli3项目配置Vue.config.js实战记录

上图内容做了两块内容,经测试没有问题

1.将启动端口设置为 8080

2.设置路径别名

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js时间查询插件使用详解
Apr 07 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
vue权限路由实现的方法示例总结
Jul 29 #Javascript
JS高级技巧(简洁版)
Jul 29 #Javascript
js运算符的一些特殊用法
Jul 29 #Javascript
不得不知的ES6小技巧
Jul 28 #Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 #Javascript
Angular6笔记之封装http的示例代码
Jul 27 #Javascript
Vue 中axios配置实例详解
Jul 27 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php中关于换行的实例写法
2019/09/26 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
python实现的重启关机程序实例
2014/08/21 Python
python版本的读写锁操作方法
2016/04/25 Python
Python学生信息管理系统修改版
2018/03/13 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python实现文法左递归的消除方法
2020/05/22 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
采购部部长岗位职责
2014/02/06 职场文书
车辆工程专业求职信
2014/06/14 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
辛亥革命观后感
2015/06/02 职场文书
校园开放日新闻稿
2015/07/17 职场文书
小学体育组工作总结
2015/08/13 职场文书
入党心得体会
2019/06/20 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python