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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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
4.与数据库的连接
2006/10/09 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
2017/12/21 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python网站验证码识别
2016/01/25 Python
Python中偏函数用法示例
2018/06/07 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python实现微信小程序支付功能
2019/07/25 Python
python tkinter实现屏保程序
2019/07/30 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python