极乐门资源网 Design By www.ioogu.com

使用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' "htmlcode">
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' "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://www.jb51.net/article/146152.htm

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

标签:
vue.config.js配置,vue.config.js

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“vue.config.js常用配置详解”

暂无vue.config.js常用配置详解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。