vue.config.js 配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const path = require('path')

const webpack = require('webpack')

// const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

const os = require('os')

// const CopyWebpackPlugin = require('copy-webpack-plugin')

// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 导入compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 定义压缩文件类型

const productionGzipExtensions = ['js', 'css']

function getNetworkIp() {

    let needHost = ' '// 打开的host

    try {

        // 获得网络接口列表

        let network = os.networkInterfaces()

        for (let dev in network) {

            let iface = network[dev]

            for (let i = 0; i < iface.length; i++) {

                let alias = iface[i]

                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {

                    needHost = alias.address

                }

            }

        }

    } catch (e) {

        needHost = '127.0.0.1'

    }

    return needHost

}

 

function resolve(dir) {

    return path.join(__dirname, dir)

}

//需要代理的服务器

let proxyTarget = 'http://xx.xx.xx.xx:xxxx'

let publicPath = process.env.NODE_ENV === 'production' ? '/' : '/'

module.exports = {

    publicPath: publicPath,

    outputDir: 'dist',

 

    // 放置静态资源的地方 (js/css/img/font/...)

    // assetsDir: '',

 

    // 是否在保存的时候使用 `eslint-loader` 进行检查。

    // 有效的值：`ture` | `false` | `"error"`

    // 当设置为 `"error"` 时，检查出的错误会触发编译失败。

    lintOnSave: true,

 

    // 使用带有浏览器内编译器的完整构建版本

    // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

    // compiler: false,

 

    // babel-loader 默认会跳过 node_modules 依赖。

    // 通过这个选项可以显式转译一个依赖。

    transpileDependencies: [

        /* string or regex */

    ],

 

    // 是否为生产环境构建生成 source map？

    productionSourceMap: false,

 

    // 调整内部的 webpack 配置。

    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md

    chainWebpack: (config) => {

        // 移除 prefetch 插件,解决组件懒加载失效的问题

        config.plugins.delete('prefetch')

        // 添加新的svg-sprite-loader处理svgIcon

        config.module

            .rule('svgIcon')

            .test(/\.svg$/)

            .include.add(resolve('src/icons'))

            .end()

            .use('svg-sprite-loader')

            .loader('svg-sprite-loader')

            .tap((options) => {

                options = {

                    symbolId: 'icon-[name]',

                }

                return options

            })

        config.plugin('ignore').use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en/))

        // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

        // 原有的svg图像处理loader添加exclude

        config.module.rule('svg').exclude.add(resolve('src/icons')).end()

    },

    // CSS 相关选项

    css: {

        // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)

        // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象

        // extract: true,

 

        // 是否开启 CSS source map？

        sourceMap: true,

 

        // 为预处理器的 loader 传递自定义选项。比如传递给

        // sass-loader 时，使用 `{ sass: { ... } }`。

        loaderOptions: {},

 

        // 为所有的 CSS 及其预处理文件开启 CSS Modules。

        // 这个选项不会影响 `*.vue` 文件。

        modules: false,

    },

 

    // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`

    // 在多核机器下会默认开启。

    parallel: require('os').cpus().length > 1,

 

    // PWA 插件的选项。

    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md

    pwa: {},

 

    // 配置 webpack-dev-server 行为。

    devServer: {

        disableHostCheck: false,

        open: false,

        // host: getNetworkIp(),

        host: getNetworkIp(),

        port: 8085,

        https: true,

        hot: true,

        // hotOnly: false,

        // eslint-disable-next-line no-dupe-keys

        open: true,

        // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理

        proxy: {

            '/api': {

                // target: 'https://10.35.1.63:8001',

                target: proxyTarget,

                changeOrigin: true,

                ws: true,

            },

        },

        before: (app) => { },

    },

    // eslint-disable-next-line no-dupe-keys

    configureWebpack: (config) => {

        Object.assign(config, {

            // 开发生产共同配置

            resolve: {

                extensions: ['.js', '.vue', '.json'],

                alias: {

                    '@': path.resolve(__dirname, './src'),

                    '@c': path.resolve(__dirname, './src/components'),

                },

            },

        })

        if (process.env.NODE_ENV === 'production') {

            // 为生产环境修改配置...

            config.plugins.push(

                // 开启压缩

                new CompressionWebpackPlugin({

                    filename: '[path].gz[query]',

                    algorithm: 'gzip',

                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),

                    threshold: 10240,

                    minRatio: 0.8

                })

            )

            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false

            if (process.env.npm_lifecycle_event === 'analyze') {

                config.plugins.push(new BundleAnalyzerPlugin())

            }

        } else {

            // 为开发环境修改配置...

        }

    },

    // 第三方插件的选项

    pluginOptions: {},

}