IOT_web/vue.config.js at master · BetterTree/IOT_web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const path = require('path')
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
const isProd = process.env.NODE_ENV === 'production'

function resolve(dir) {
    return path.join(__dirname, './', dir)
}

module.exports = {
    publicPath: '/',
    // eslint保存时检查
    lintOnSave: false,
    devServer: {
        port: 8088,
        open: true,
        proxy: {
            '/api': {
                target: process.env.API,
                changeOrigin: true,
                cookieDomainRewrite: 'localhost',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 192,
                        propList: ['*']
                    })
                ]
            }
        }
    },
    chainWebpack: config => {
        // svg rule loader
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule.exclude.add(/node_modules/)
        svgRule // 添加svg新的loader处理
            .test(/\.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })

        // 修改images loader 添加svg处理
        const imagesRule = config.module.rule('images')
        imagesRule.exclude.add(resolve('src/icons'))
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

        // #region
        if (isProd) {
            var externals = {
                vue: 'Vue',
                vuex: 'Vuex',
                axios: 'axios',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter'
            }
            const cdn = {
                css: [
                    // element-ui css
                    // '//unpkg.com/element-ui/lib/theme-chalk/index.css'
                ],
                js: [
                    '//cdn.staticfile.org/vue/2.6.10/vue.min.js',
                    '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js',
                    '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
                    '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
                    '//unpkg.com/element-ui@2.12.0/lib/index.js'
                ]
            }
            config.externals(externals)
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn
                    return args
                })
        }
        // #endregion
    },
    configureWebpack: config => {
        if (isProd) {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))
            config.plugins.push(
                new TerserPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: false,
                    terserOptions: {
                        compress: {
                            drop_console: true,
                            drop_debugger: true
                        }
                    }
                })
            )
        }
    },
    productionSourceMap: false,
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                resolve('src/styles/color.less'),
                resolve('src/styles/mixin.less')
            ]
        }
    }
}