wang_zhuang_daping/vue.config.js

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const {
    each,
    keys
} = require('lodash')

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

const name = defaultSettings.title || '旺庄街道服务业科技企业统计平台' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const ip = '0.0.0.0' // dev port
const port = 9525 // dev port

const pages = {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        chunks: [
            'manifest',
            'index',
            'chunk-index',
            'chunk-mobile',
            'chunk-vendor',
            'chunk-common',
            'chunk-vue',
            'chunk-element'
        ]
    },
    mobile: {
        entry: 'src.mobile/main.js',
        template: 'public/mobile.html',
        filename: 'mobile.html',
        chunks: ['manifest', 'mobile', 'chunk-mobile', 'chunk-vendor', 'chunk-common', 'chunk-vue']
    }
}

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
    /**
     * You will need to set publicPath if you plan to deploy your site under a sub path,
     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then publicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     * Detail: https://cli.vuejs.org/config/#publicpath
     */
    publicPath: '/ec/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    devServer: {
        open: true,
        host: ip,
        port: port,
        https: false,
        disableHostCheck: true,
        // 以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {
            // 配置跨域
            '/webServer': {
                // target: 'http://wy.idea-sf.com:9010/',
                // target: 'http://localhost:9991/',
                // target: 'http://localhost:9001/',
                target: "http://wztjpt.idea-sf.com/wztjpt/",
                // target: process.env.VUE_APP_WEB_API_URL,
                ws: true,
                changOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/webServer': '' // 请求的时候使用这个server就可以
                }
            }
        }
    },
    pages,
    configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
            alias: {
                '@': resolve('src'),
                '@.mobile': resolve('src.mobile')
            }
        },
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            axios: 'axios',
            'element-ui': 'ELEMENT',
            qs: 'Qs',
            xlsx: 'XLSX'
        },
        plugins: [
            // gzip
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: false
            })
        ]
    },
    chainWebpack(config) {
        // Remove prefetch preload settings for lazy load modules
        each(keys(pages), name => {
            config.plugins.delete(`prefetch-${name}`)
            config.plugins.delete(`preload-${name}`)
        })

        // set svg-sprite-loader
        config.module.rule('svg').exclude.add(resolve('src/icons')).end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()

        // set preserveWhitespace
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.preserveWhitespace = true
                return options
            })
            .end()

        config
            // https://webpack.js.org/configuration/devtool/#development
            .when(process.env.NODE_ENV === 'development', config =>
                config.devtool('cheap-source-map')
            )

        config.when(process.env.NODE_ENV !== 'development', config => {
            config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [{
                    // `runtime` must same as runtimeChunk name. default is `runtime`
                    inline: /runtime\..*\.js$/
                }])
                .end()
            config.optimization.runtimeChunk({
                name: 'manifest'
            })
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    libs: {
                        name: 'chunk-vendor',
                        chunks: 'initial',
                        minChunks: 1,
                        test: /[\\/]node_modules[\\/]/,
                        priority: 1,
                        reuseExistingChunk: true,
                        enforce: true
                    },
                    common: {
                        name: 'chunk-common',
                        chunks: 'initial',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 2,
                        reuseExistingChunk: true,
                        enforce: true
                    },
                    // External dependencies that are only used by the index page
                    index: {
                        name: 'chunk-index',
                        chunks: 'all',
                        minChunks: 1,
                        test: /[\\/]node_modules[\\/](sortablejs|screenfull|nprogress|hotkeys-js|fuse\.js|better-scroll|lowdb|shortid)[\\/]/,
                        priority: 3,
                        reuseExistingChunk: true,
                        enforce: true
                    },
                    // External dependencies that are only used by the mobile page
                    mobile: {
                        name: 'chunk-mobile',
                        chunks: 'all',
                        minChunks: 1,
                        test: /[\\/]node_modules[\\/](vant)[\\/]/,
                        priority: 4,
                        reuseExistingChunk: true,
                        enforce: true
                    },
                    // Vue family packages
                    vue: {
                        name: 'chunk-vue',
                        test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
                        chunks: 'all',
                        priority: 20,
                        reuseExistingChunk: true,
                        enforce: true
                    },
                    // only element-ui
                    element: {
                        name: 'chunk-element',
                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                        chunks: 'all',
                        priority: 15,
                        reuseExistingChunk: true,
                        enforce: true
                    }
                }
            })
        })
    }
}