Vue-cli3.x配置文件vue.config.js，配置组件

手册：https://webpack.js.org/configuration/devtool/#devtool

目录

• • 前言
  • defineConfig 帮手函数配置
  • configureWebpack 与 chainWebpack 配置
  • • （1）configureWebpack对象形式
    • （2）configureWebpack函数形式

前言

vue.config.js 是一个可选的脚手架配置文件，会更新 webpack.config.js 中对应的配置项

修改完成后需要重新执行 npm run serve

defineConfig 帮手函数配置

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({});

配置实例：

const { defineConfig } = require('@vue/cli-service');
 
module.exports = defineConfig({
    transpileDependencies: true, // 是否将所有文件都编译一遍（通过 babel 编译文件：ES6+ → ES5）
    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']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    }
});

configureWebpack 与 chainWebpack 配置

• configureWebpack通过操作对象的形式，来修改默认的webpack配置
• chainWebpack通过链式编程的形式，来修改默认的webpack配置

（1）configureWebpack对象形式

configureWebpack:{
   resolve: {
       // 别名配置
        alias: {
          'assets': '@/assets',
          'common': '@/common',
          'components': '@/components',
          'network': '@/network',
          'configs': '@/configs',
          'views': '@/views',
          'plugins': '@/plugins',
         }
    }
}

（2）configureWebpack函数形式

configureWebpack:(config) => {
    if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
        config.mode = 'production'
    } else {
        // 为开发环境修改配置...
        config.mode = 'development'
    }
    // 开发生产共同配置别名
    Object.assign(config.resolve, {
        alias: {
            '@': path.resolve(__dirname, './src'),
            'assets': path.resolve(__dirname, './src/assets'),
            'common': path.resolve(__dirname, './src/common'),
            'components': path.resolve(__dirname, './src/components'),
            'network': path.resolve(__dirname, './src/network'),
            'configs': path.resolve(__dirname, './src/configs'),
            'views': path.resolve(__dirname, './src/views'),
            'plugins': path.resolve(__dirname, './src/plugins'),
        }
    })
}