vue3.x vue.config.js文件配置

Posted 2021-06-13 q-linyu

创建 vue.config.js 文件

const path = require(\'path\')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
  publicPath: process.env.NODE_ENV === \'production\' ? \'/\' : \'/\',
  // 打包输出
  outputDir: "dist",
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: \'assets\',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV !== \'production\',
  // 多线程打包
  // parallel: require(\'os\').cpus().length > 1,
  pages: {
    index: {
      // page 的入口
      entry: \'src/main.js\',
      // 模板来源
      template: \'public/index.html\',
      // 在 dist/index.html 的输出
      filename: \'index.html\',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: \'首页\',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: [\'chunk-vendors\', \'chunk-common\', \'index\']
    },
    // 简写格式
    // 模板文件默认是 `public/subpage.html`
    // 如果不存在，就是 `public/index.html`.
    // 输出文件默认是 `subpage.html`.
    subpage: \'src/main.js\'
  },
  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右
  runtimeCompiler: false,
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  // 设置类型是Sring，设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
  crossorigin: undefined,
  //在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,
  //需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
  //另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
  configureWebpack: Function,//如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  //如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
  chainWebpack: Function,//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  // 链式webpack配置
  chainWebpack: config => {
    // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
    config.optimization.splitChunks({
      cacheGroups: {}
    })

    config.resolve.alias
      // 定义 src 目录变量
      .set(\'@\', resolve(\'src\'))
      // 定义 components 目录变量
      .set(\'_c\', resolve(\'src/components\'))

    // 如有需要,指定外部某个文件不受eslint检测影响
    config.module.rule(\'eslint\').exclude.add(\'/src/utils\').end()
  },
  configureWebpack: config => {

  },
  // 打包时不生成.map文件
  productionSourceMap: false,
  //css.loaderOptions:{},//Object,默认是{},向 CSS 相关的 loader 传递选项
  css: {
    //生产环境下是 true，开发环境下是 false,是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 javascript 中的 inline 代码)
    extract: process.env.NODE_ENV === \'production\',
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    loaderOptions: {
      css: {},
      less: {}
    }
  },
  //支持的 loader 有：css-loader,postcss-loader,sass-loader,less-loader,stylus-loader

  // 配置本地服务
  devServer: {
    // 端口号
    port: 3000,
    host: \'localhost\',
    https: false,
    // 配置自动启动浏览器
    open: true,
    hotOnly: false,
    before: app => { },
    // 跨域
    proxy: {
      \'/api\': {
        target: \'http://localhost:8001/\',
        changeOrigin: true,
        pathRewrite: { \'^/api\': \'\' }
      }
    }
  },
  // 多线程打包
  parallel: require(\'os\').cpus().length > 1,
  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // 第三方插件配置
  pluginOptions: {}
}