vue.config.js打包配置

基于 vue-cli v5 配置

1. 单页面打包，在配置入口文件的时候按照下面打包会报错

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']
    }
  }

执行打包命令会报错，index.html 文件重复，vue-cli 集成了 webpack 的配置，开箱即用。默认的entry文件就是src/main.js，所以干脆删掉了 pages 配置项。在项目是多入口的情况下，可以使用 pages 配置多入口。

1. 完整打包配置如下

const {defineConfig} = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
const isProduction = process.env.NODE_ENV === 'production'

function resolve(dir) {
  return path.join(__dirname, dir)
}

const cdn = {
  // 忽略打包的第三方库
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT '
  },

  // 通过cdn方式使用
  js: [
    'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
    'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
    'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
    'https://unpkg.com/element-ui/lib/index.js'
  ],

  css: [
    'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
  ]
}
module.exports = defineConfig({
  // 具体使用情况还需要看项目的配置
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // baseUrl 弃用
  outputDir: 'dist',
  assetsDir: 'static',
  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  lintOnSave: !isProduction,
  productionSourceMap: !isProduction, // 生产环境下不起用source-map
  indexPath: 'index.html',
  // 前端配置代理
  devServer: {
    port: 9527, // 默认8080
    proxy: {
      '/api': {
        target: '', // 要代理的地址
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  /**
   * 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
   * 配置文件打包方式
   * 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
   * @param config | Object
   */
  configureWebpack: config => {
    // 忽略第三方资源
    config.externals = cdn.externals
    // 打包配置
    if (isProduction) {
      // 生产环境下打包文件
      let customPulgins = []
      config.mode = 'production'
      config.performance = {
        // 性能提示
        hints: false,
        // 入口文件大小配置
        maxEntrypointSize: 400000,
        // 静态资源文件大小配置
        maxAssetSize: 100000
      }
      customPulgins.push(
        // 代码压缩
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: /\.js$|\.html$|\.css$/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8  // 压缩比
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log']
            },
            output: {
              // 去掉注释内容
              comments: true
            }
          },
          sourceMap: false,
          parallel: true
        })
      )
      config.plugins = [...config.plugins, ...customPulgins]
    } else {
      // 开发环境配置
    }
  },

  /**
   * 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
   * 添加编译的 loader
   * @param config
   */
  chainWebpack: config => {
    // 修改默认的入口文件路径
    // config.entry.app = 'xxxxxxx'
    if (isProduction) {
      // 生产环境注入cdn资源 需要在pubic/index.html配置
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 配置别名
    config.resolve.alias
      .set('@', resolve('src'))
  },

  // css配置项
  css: {
    // 如果你想去掉文件名中的 .module，可以设置 vue.config.js 中的 css.requireModuleExtension 为 false
    loaderOptions: {
      // 定义全局样式无需引入即可使用
      sass: {
        prependData: `
              @import "@/assets/css/variable.scss";
              @import "@/assets/css/common.scss";
              @import "@/assets/css/mixin.scss";
            `,
        modules: {
          auto: () => false
        }
      }
    }
  }
})

有更好的配置方案，欢迎留言补充啊！栓q！