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

//引入webpack
const webpack = require('webpack');
const path = require('path');
const { config } = require('process');
const resolve = dir => path.resolve(__dirname, dir)

const Version = new Date().getTime();  //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
module.exports = {
    // 显式转义依赖
    transpileDependencies: ['webpack-dev-server/client'],
    //基本路径
    publicPath: process.env.NODE_ENV === 'production' ? '/ : '/',
    // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'static',
    // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
    outputDir: "dist",
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    productionSourceMap: false,
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath: 'index.html',
    lintOnSave: false,
    configureWebpack: {
        externals: {
        },
        performance: {
            hints: 'warning',
            //入口起点的最大体积 整数类型（以字节为单位）
            maxEntrypointSize: 50000000,
            //生成文件的最大体积 整数类型（以字节为单位 300k）
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function (assetFilename) {
                return assetFilename.endsWith('.js');
            }
        },
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            // publicPath: './',
            // path: config.build.assetsDir,
            filename: `js/[name]_${Version}.js`,
            chunkFilename: `js/[name]_${Version}.js`
        }
    },
    chainWebpack: config => {
        config.entry.app = ['babel-polyfill', './src/main.js'];
        // 修复HMR
        config.resolve.symlinks(true)
        //修复 Lazy loading routes Error
        // config.plugin('preload')
        //     .tap(args => {
        //         args[0].fileBlacklist.push(/\.css/, /\.js/)
        //         return args
        //     })
        config.plugin('html').tap(args => {
            // args[0].chunksSortMode = 'none';
            //args[0].inlineSource = '(\.css|\.js$)'
            args[0].title = 'vue项目标题'
            return args;
        });
        // 富文本图片缩小放大 插件
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill'
        }]);
        // 添加别名
        // config.resolve.alias
        //     .set('@', resolve('src'))
        //     .set('assets', resolve('src/assets'))
        //     .set('components', resolve('src/components'))
        //     .set('layout', resolve('src/layout'))
        //     .set('base', resolve('src/base'))
        //     .set('static', resolve('src/static'));
        //压缩图片
        // config.module
        //     .rule("images")
        //     .use("image-webpack-loader")
        //     .loader("image-webpack-loader")
        //     .options({
        //         mozjpeg: { progressive: true, quality: 65 },
        //         optipng: { enabled: false },
        //         pngquant: { quality: "65-90", speed: 4 },
        //         gifsicle: { interlaced: false },
        //         webp: { quality: 75 }
        //     });

        // 打包分析
        // if (process.env.IS_ANALYZ) {
        //     config.plugin('webpack-report')
        //         .use(BundleAnalyzerPlugin, [{
        //             analyzerMode: 'static',
        //         }]);

        // }
    },
    //webpack-dev-server相关配置
    devServer: {
        open: false,
        host: "localhost",
        port: 8080,
        overlay: {
            warnings: true,
            errors: true
        },
        https: false,
        hotOnly: false,
        proxy: {
            "/api": {
                target: "http://ip:8888",// ip为ip地址
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true,
                //pathRewrite:{"^/api":""}
            }
        }
    }
}