vue.config.js 4.63 KB
const { defineConfig } = require('@vue/cli-service')
// js压缩插件
const TerserPlugin = require('terser-webpack-plugin')
// 动态引入vant组件
const { VantResolver } = require('@vant/auto-import-resolver')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = defineConfig({
    transpileDependencies: true,
    indexPath: 'index.html',
    publicPath: '/', // 设置打包文件相对路径
    outputDir: 'dist',
    productionSourceMap: false,
    devServer: {
        port: 8085,
        // 设置代理
        proxy: {
            '/tumour-admin': {
                // target: 'http://192.168.1.7:8081',
                target: 'https://beta-tumour.zmnyjk.com',
                changOrigin: true,
                pathRewrite: {
                    '^/tumour-admin': '/tumour-admin'
                }
            },
            '/chronic-admin': {
                target: 'https://beta-tumour.zmnyjk.com',
                // target: 'http://192.168.1.216:8900',
                changOrigin: true,
                pathRewrite: {
                    // '^/chronic-admin': '/'
                    '^/chronic-admin': '/chronic-admin'
                }
            },
            '/chronic-resident': {
                // target: 'http://192.168.1.142:8903',
                target: 'https://beta-tumour.zmnyjk.com',
                changOrigin: true,
                pathRewrite: {
                    // '^/chronic-resident': '/',
                    '^/chronic-resident': '/chronic-resident'
                }
            }
        },
    },
    chainWebpack: config => {
        // 自定义svg图标设置
        // 原svg规则排除 src/assets/icon 文件夹
        config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
        // 新增svg加载规则
        config.module
            .rule('icon')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader') // 加载解析svg 拼接为雪碧图
            .options({
                symbolId: 'icon-[name]'
            })
            .end()

        config.plugins.delete('preload')
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
        // 打包切分css
        if (process.env.NODE_ENV === 'production') {
            config.plugin('extract-css').tap(args => {
                args[0].filename = `css/[name].[contenthash:8].css`
                return args
            })
        }
        // 浏览器页签标题
        config.plugin('html').tap(args => {
            args[0].title = '啄木鸟云健康'
            return args
        })
        // https://cn.vuejs.org/api/compile-time-flag
        config.plugin('define').tap((definitions) => {
            Object.assign(definitions[0], {
                __VUE_OPTIONS_API__: 'true',
                __VUE_PROD_DEVTOOLS__: 'false',
                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
            })
            return definitions
        })
        
    },
    configureWebpack: config => {
        // 输出重构  打包编译后的 文件名称  【版本号】
        config.output.filename = `js/[name].[chunkhash:8].js`
        config.output.chunkFilename = `js/[name].[chunkhash:8].js`
        // 压缩js
        config.optimization.minimizer.unshift(
            new TerserPlugin({
                // 启用多线程
                parallel: 4,
                terserOptions: {
                    // 构建时去除注释
                    format: {
                        comments: false
                    },
                    compress: {
                        // 不调用console.*
                        drop_console: true,
                        // 移除debugger
                        drop_debugger: true,
                        // 移除console.log
                        // pure_funcs: ['console.log']
                    },
                },
                // 是否将注释剥离到单独的文件中
                extractComments: false
            })
        )
        config.plugins.push(
            AutoImport.default({ resolvers: [VantResolver()] })
        )
        config.plugins.push(
            Components.default({ resolvers: [VantResolver()] })
        )
    },
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    // 允许less文件中运行js
                    javascriptEnabled: true
                }
            }
        }
    }
})