vue.config.js的基本介绍

地址一
地址二

'use strict'
const { resolve } = require('path')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {
    publicPath: '/', // 部署应用包时的基本 URL 默认
    outputDir: 'dist', // 输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的目录。
    lintOnSave: process.env.NODE_ENV === 'development', // (本地环境下使用) 是否在保存的时候使用 `eslint-loader` 进行检查
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    devServer: {
        port: '8080', // 端口号
        open: true, // 自动打开浏览器
        hot: true, // 热更新
        //     proxy: {
        //         '/api': {
        //             target: process.env.VUE_APP_BASE_API, // 后跟自己的基础接口
        //             changeOrigin: true,
        //             pathRewrite: {
        //                 '^/api': 'api'
        //             }
        //         }
        //     }
    },
    configureWebpack: config => {
        if (process.env.VUE_APP_BASE_API === 'production') {
            // 安装 npm install uglifyjs-webpack-plugin
            config.plugins.push(
                //生产环境自动删除console
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            );
            // cdn方式引入
            config.externals = {
                // 'element-ui': 'ELEMENT',
            }
        }
    },
    chainWebpack: config => {
        if (process.env.VUE_APP_BASE_API === 'production') {
            // js文件最小化处理  压缩代码
            config.optimization.minimize(true);
            // 分割代码
            config.optimization.splitChunks({
                chunks: 'all'
            });
            // 删除预加载
            config.plugins.delete('preload');
            config.plugins.delete('prefetch');
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: false, // css 热更新时 需要关闭
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            css: {},
            postcss: {
              plugins: [
                require('postcss-px2rem')({
                  remUnit: 37.5 //根据设计图 
                  //375的图就给37.5，也就是1rem=37.5px
                })
              ]
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false,
    },
}