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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
js中let能否完全替代IIFE
Jun 15 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
在Python中定义一个常量的方法
2018/11/10 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python批量启动多线程代码实例
2020/02/18 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
态度决定一切演讲稿
2014/05/20 职场文书
住房抵押登记委托书
2014/09/27 职场文书
旷课检讨书范文
2014/10/30 职场文书
党员检讨书范文
2014/12/27 职场文书
统计工作个人总结
2015/03/03 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript