vue.config.js封装的简易配置

//安装 
npm i -D compression-webpack-plugin 

//settings.js

module.exports = {
    platform: "ES",
    title: "维达后台管理(华东)",
    name: "维达(华东)"
};

// 代码包大小分析
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// gzip 压缩 @6.1.1
const CompressionPlugin = require("compression-webpack-plugin");
// 默认配置
const defaultSettings = require("./src/settings.js");
module.exports = {
    // 静态资源引入方式
    publicPath: "./",
    assetsDir: "static",
    productionSourceMap: process.env.NODE_ENV !== "production",
    // 配置 scss 全局变量
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/scss/base.scss";`
            }
        }
    },
    //下面是可以配置链接的地址
    //需要你自己把地址链接配上 我这没给
    // 本地服务
    devServer: {
        // 打开浏览器
        // open: true,
        // 内网穿透
        disableHostCheck: true,
        // 本地跨域
        proxy: {
            "/PROXY_API": {
                target: process.env.VUE_APP_BASE_API,
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    "^/PROXY_API": ""
                }
            }
        }
    },
//。。。。。。。。。。。。。。。。。。。。。。
    pages: {
        index: {
            entry: "src/main.js",
            template: "public/index.html",
            filename: "index.html",
            title: defaultSettings.title
        }
    },
    configureWebpack: {
        plugins: [
            // new BundleAnalyzerPlugin(),
            new CompressionPlugin({
                filename: "[path][base].gz",
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: false
            })
        ]
    },
    chainWebpack: config => {
        // 移除 prefetch/preload 插件(配合组件懒加载，不做预加载)
        config.plugins.delete("prefetch-index");
        // config.plugins.delete("preload-index");
    }
};

下面是vue.config.js的普通配置

module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

//基本路径
publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
// 输出文件目录
outputDir: 'dist',
assetsDir:'static',
indexPath:'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
},
// webpack-dev-server 相关配置
devServer: {
open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
port: 8080,
hot:true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
https: false,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
proxy: {
'/': {
target: 'http://xxxx:8080', //目标接口域名
secure: false, //false为http访问，true为https访问
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //重写接口
}
}
}, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};