首页 > 其他分享 >vue.config.js --- vue-cli 4.0配置

vue.config.js --- vue-cli 4.0配置

时间:2022-12-01 18:11:43浏览次数:54  
标签:vue 4.0 api loader webpack html js config

// 所有配置请参考 https://cli.vuejs.org/zh/config/
module.exports = {
  /**
   * publicPath
   * hash 模式下可使用
   * publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
   * 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致
   * 例子:http://localhost:8080/bdsp-page/#/login
   */
  publicPath: '/bdsp-page',
  // 打包输出后的文件夹
  outputDir: 'dist',
  // 静态资源存放的目录,相对于 outputDir 指定的文件夹
  assetsDir: 'static',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: './',
  /*
  //  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
  //  其值应该是一个对象,对象的 key 是入口的名字,value 是:
  //     1、一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的);
  //     2、或一个指定其 entry 的字符串。
      pages: {
      bdsp: {
        // page 的入口
        entry: 'src/bdsp-page/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/datax.html`
      // 并且如果找不到的话,就回退到 `public/index.html`。
      // 输出文件名会被推导为 `datax.html`。
      datax: 'src/datax/main.js'
    }
  */

  /**
   * lintOnSave
   * 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
   * 这个值会在 @vue/cli-plugin-eslint 被安装之后生效
   *
   * 值: boolean | 'warning' | 'default' | 'error'
   * true | 'warning' 会输出 编译警告
   * 'default' | 'error' 会输出 编译错误,导致编译失败
   */
  lintOnSave: process.env.NODE_ENV === 'development',
  // SourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中,
  // 使开发者可以在源码文件中 debug
  productionSourceMap: false,

  /**
   * configureWebpack: Object | Function
   * 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中(会合并到webpack配置中)。
   * 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数
   * 该方法的第一个参数会收到已经解析好的配置。
   * 在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
   * configureWebpack: config => {
   *   if (process.env.NODE_ENV === 'production') {
   *     // 为生产环境修改配置...
   *   } else {
   *     // 为开发环境修改配置...
   *   }
   * }
   */
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/system/Crud')
      }
    },
    // 警告 webpack 的性能提示
    performance: {
      // hints: 'warning',
      // // 入口起点的最大体积 整数类型(以字节为单位)
      // maxEntrypointSize: 50000000,
      // // 生成文件的最大体积 整数类型(以字节为单位 300k)
      // maxAssetSize: 30000000
      // // 只给出 js 文件的性能提示
      // assetFilter: function(assetFilename) {
      //   return assetFilename.endsWith('.js')
      // }
    }

  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  },
  /**
   * requireModuleExtension, extract, sourceMap, loaderOptions
   * css相关配置具体见:https://cli.vuejs.org/zh/config/#css-extract
   * css: {
   *    // 默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。
   *    // 详情:https://cli.vuejs.org/zh/guide/css.html#css-modules
   *    requireModuleExtension: true,
   *
   *    // 向预处理器 Loader 传递选项
   *    // 更多详情:https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
   *    loaderOptions: {
   *      css: {
   *        // 这里的选项会传递给 css-loader
   *      },
   *      postcss: {
   *        // 这里的选项会传递给 postcss-loader
   *      }
   *    }
   * }
   */
  /**
   * devServer
   * 所有 webpack-dev-server 的选项都支持
   * 详情:https://webpack.docschina.org/configuration/dev-server/
   * 注意:
   *    1、有些值像 host、port 和 https 可能会被命令行参数覆写。
   *    2、有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
   */
  devServer: {
    // 指定监听请求的端口号,自动使用可以设置为 'auto'
    port: port,
    // 启动完毕后,自动打开在浏览器上
    open: false,

    // overlay: true  当出现编译错误或警告时,在浏览器中显示全屏覆盖。
    // 当前配置表示,只显示错误,不显示警告
    overlay: {
      warnings: false,
      errors: true
    },
    /**
     * proxy:请求代理
     * 值:
     * 1、String
     *    例:proxy: 'http://localhost:4000'
     *    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000
     * 2、Object
     *    完整的选项可以查阅 https://github.com/chimurai/http-proxy-middleware#proxycontext-config
     */
    proxy: {
      // 如果检测到以 /api 开头的请求,则会开启代理
      '/api': {
        // 转换为 真实的 请求地址
        target: process.env.VUE_APP_BASE_API,
        // 是否跨域:true 是;false 否
        changeOrigin: true,
        // 将 第一个 /api 改为 api ,可以改任意值
        pathRewrite: {
          '^/api': 'api'
        }
      }
      /**
       * 例: 请求路径为 /api/login,真实地址为 http://localhost:8080/
       * 使用代理:
       * '/api': {
       *    target: 'http://localhost:8080/',
       *    changeOrigin: false,
       *    pathRewrite: {
       *      '^/api': ''
       *    }
       *  }
       * 经过代理以后的请求地址:http://localhost:8080/login
       *
       * 注意:
       * 如果使用了请求拦截器,并设置了统一的请求头,
       * 则代理收到的是 拦截过后 的请求路径,即 请求头+请求路径
       */
    }
  },
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

 

标签:vue,4.0,api,loader,webpack,html,js,config
From: https://www.cnblogs.com/Smile-W/p/16942242.html

相关文章

  • js 扩展运算符(...)的用法
    在日常开发中,我们在看js代码时,经常会看到(...)这样的符号。这里介绍一下它的含义和作用。定义:扩展运算符(...)是ES6的语法,用于取出参数对象的所有可遍历属性,然后拷贝到当前......
  • 前后端分离项目VUE使用axios调用微服务SpringBoot后端接口无法获取参数
    前言首先这是一个很简单却又很恶心的问题,简单就是只需要根据服务端的入参规则传参就行了,恶心就是在写前端时,大多数是只知道入参和请求方式的,但是这里就会涉及到一些小的知识......
  • vue2 数组18 some erver filter reduce axios
    some: return true是固定写法,终止some循环 erver: filter:   优化写法:arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{},初始值)拿上......
  • vue生命周期及钩子函数
    1.什么是vue生命周期vue生命周期指实例从开始创建到销毁的过程,在整个生命周期中,它提供了一系列事件,可以让我们在事件触发时注册js方法。在这些方法中,this指向的......
  • vue3使用记录
    1.路由跳转<scriptsetup>import{useRouter}from"vue-router";constrouter=useRouter();functiontoDetail(){router.push({path:"/detail",});......
  • vue3状态流转记录
    刚用vue3的时候觉得习惯了之后非常爽,比vue2比起来要灵活,ref、reactive等新api写几个页面也基本理解用法了。但是逐渐深入后发现遇到一些疑难问题的时候,排查起来非常困难,其......
  • JAVA整合阿里云OSS/VUE上传阿里云OSS
    前言今天码帮帮系统已经整合到上传项目案例的功能了,这里有一些图片资源需要上传,之前做项目对接过七牛云,也有使用过阿里云的视频点播服务,不过这次对接阿里云的OSS确实有点......
  • VUE全局this指向
    前言在很久很久之前我还是个菜鸡的时候,解决报错的时候,不幸看过一种关于this指向的写法,当时没记住,只知道有个这么个模糊的概念,然后今天晚上来了灵感,就写出来了,说到这个thi......
  • vue全局引入scss(mixin)
    前言today,isgoodday,中午吃了个农民工外卖,有点撑,想在床上躺会,TMD,睁开眼天黑了,别说,冬天的上海天黑的挺早,基本上五点半就已经全黑了,住在出租屋的我,却感觉不到上海的灯火通......
  • VUE在线调用阿里Iconfont图标库
    前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白。。。开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,......