vue.config.js 常用配置

vue.config.js常用配置

1. 自动提示

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // 选项...
}

2. 插件的使用

例如使用 filemanager-webpack-plugin 插件，安装npm install filemanager-webpack-plugin

const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    plugins: [
      // 直接实例化插件即可
      new FileManagerPlugin({
        events: {
          // 在命令开始执行的时候
          onStart: {
            // 删除 dist 目录
            delete: [path.join(__dirname, 'dist')]
          },
          // 命令执行结束
          onEnd: {
            // 复制操作
            copy: [
              // 讲根目录下的 conf 文件夹 复制到 dist/conf 中
              { source: path.join(__dirname, 'conf'), destination: path.join('dist/conf') }
            ]
          }
        }
      })
    ]
  }
}

3. 注入参数，在index.html文件中使用

3.1 vue.config.js配置如下

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  chainWebpack: (config) => {
    // 在 html 中注入参数变量
    config.plugin('html').tap((args) => {
      // 在这里
      args[0].title = '这是标题'
      args[0].description = '这是描述文件'
      args[0].cdn = 'https://www.baidu.com'
      // 注意，这里一定要返回 args 不然要报错
      return args
    })
    return config
  }
}

3.2 在public/index.html配置如下

<p><%= htmlWebpackPlugin.options.title %></p>
<p><%= htmlWebpackPlugin.options.description %></p>
<p><%= htmlWebpackPlugin.options.cdn %></p>