vue.config.js常用配置详解


Posted in Javascript onNovember 14, 2019

使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹。

vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置

module.exports = {
 // 选项...
}

基本路径

baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。

在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

构建输出目录(打包位置)

outputDir

当运行 vue-cli-service build 时生成的生产环境构建文件的目录

module.exports = {
 outputDir: 'dist',
}

静态资源目录

assetsDir

放置生成的静态资源 (js、css、img、fonts) 的目录

module.exports = {
 assetsDir: 'assets',
}

eslint代码检测

是否开启eslint保存检测,有效值:ture | false | 'error'

设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败

希望让 lint 错误在开发时直接显示在浏览器中,可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误

webpack-dev-server 相关配置

devServer

devServer: {
    open: true,//设置自动打开
    port: 1880,//设置端口
    proxy: {
      //设置代理


'/axios': {




target: 'http://101.15.22.98',




changeOrigin: true,




secure: false, //如果是http接口,需要配置该参数




pathRewrite: {





'^/axios': ''





}




}
      }
    }
  }
module.exports = {
  // 部署应用时的基本 URL
  publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',

  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: '',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 默认在生成的静态资源文件名中包含hash以控制缓存
  filenameHashing: true,

  // 构建多页面应用,页面的配置
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,

  // Babel 显式转译列表
  transpileDependencies: [],

  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
  productionSourceMap: true,

  // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)
  crossorigin: '',

  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,

  // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
  // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
  configureWebpack: {},

  // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
  chainWebpack: () =>{

  },

  // css的处理
  css: {
    // 当为true时,css文件名可省略 module 默认为 false
    modules: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true,开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      css: {},
      less: {}
    }
  },

  // 所有 webpack-dev-server 的选项都支持
  devServer: {},

  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // 向 PWA 插件传递选项
  pwa: {},

  // 可以用来传递任何第三方插件选项
  pluginOptions: {}
}

参考:https://3water.com/article/146152.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 #Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 #Javascript
Node绑定全局TraceID的实现方法
Nov 14 #Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 #Javascript
vue router 传参获取不到的解决方式
Nov 13 #Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 #Javascript
vue props对象validator自定义函数实例
Nov 13 #Javascript
You might like
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
简单的python后台管理程序
2017/04/13 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Pytorch 实现权重初始化
2019/12/31 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
白色公司:The White Company
2017/10/11 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
说明书怎么写
2014/05/06 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014年招商工作总结
2014/11/22 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电