vue.config.js 配置项自我记录学习

vue2项目vue.config.js 文件简单的配置

1.导出文件

module.exports = {
    ...配置项
}

2. 环境变量 publicPath

    publicPath: process.env.NODE_ENV === 'production' ? '' : '/',   环境变量，通常用于确在开发环境还是生产环境

3.打包后的文件 outputDir

outputDir: 'dist',

4.静态文件的名称目录

 assetsDir: 'assets',
 

5.devServer配置

 devServer: {
     port: 8080,   //配置端口号
     host: '0.0.0.0',  //配置IP地址 一般默认0.0.0.0就可以了
     https: false,  //配置前缀
     open: true,   //是否启动自动打开浏览器
     proxy: { //解决跨域，不存在跨域，则不需要进行该配置
       '/api': { // 拦截以 /api 开头的url接口
         target: 'https://api.taobao.cn/', //目标接口域名
         changeOrigin: true, //是否跨域
         ws: true, //如果要代理 websockets，配置这个参数
         secure: false, // 如果是https接口，需要配置这个参数
         // 标识替换
         pathRewrite: { // 标识替换
           '^/api': ''   //重写接口 后台接口指向不统一  所以指向所有''
         }
       }
     }
     },

6.config.resolve.alias 配置别名

      config.resolve.alias
      .set('@', resolve('src')) 
      .set('api', resolve('src/apis')) 
      .set('common', resolve('src/common'))
      
      

7. 不是很全的配置

    const path = require('path');
    
    module.exports = {
        productionSourceMap: false,
        publicPath: './',
        outputDir: 'dist',
        assetsDir: 'assets',
        devServer: {
            port: 9999,
            host: '0.0.0.0',
            https: false,
            open: true
        },

    chainWebpack: (config) => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach(type => {
            let rule = config.module.rule('less').oneOf(type)
            rule.use('style-resource')
                .loader('style-resources-loader')
                .options({
                    patterns: [path.resolve(__dirname, './lessVariates.less')]
                });
        });

    config.resolve.alias
        .set('@', resolve('src')) 
        .set('api', resolve('src/apis'))
        .set('common', resolve('src/common'))

    config.module.rule('images').use('url-loader')
        .tap(options => ({
            name: './assets/images/[name].[ext]',
            quality: 85,
            limit: 0,
            esModule: false,
        }));

    config.module.rule('svg')
        .test(/\.svg$/)
        .include.add(resolve('src/svg'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader');

    config.plugin('define').tap(args => [{
        ...args, 
        "window.isDefine": JSON.stringify(true)
    }]);

    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
        config.output.filename('./js/[name].[chunkhash:8].js');
        config.output.chunkFilename('./js/[name].[chunkhash:8].js');
        config.plugin('extract-css').tap(args => [{
            filename: 'css/[name].[contenthash:8].css',
            chunkFilename: 'css/[name].[contenthash:8].css'
        }]);
        config.plugin('hotHash').use(HotHashWebpackPlugin, [{ version : '1.0.0'}]);
        config.plugin('webpackBar').use(WebpackBar);

        config.optimization.minimize(true)
            .minimizer('terser')
            .tap(args => {
                let { terserOptions } = args[0];
                terserOptions.compress.drop_console = true;
                terserOptions.compress.drop_debugger = true;
                return args
            });
        config.optimization.splitChunks({
            cacheGroups: {
                common: {
                    name: 'common',
                    chunks: 'all',
                    minSize: 1,
                    minChunks: 2,
                    priority: 1
                },
                vendor: {
                    name: 'chunk-libs',
                    chunks: 'all',
                    test: /[\\/]node_modules[\\/]/,
                    priority: 10
                }
            }
        });
    }
}
};