const path = require('path'); const defaultSettings = require('./src/config/index.js'); /* const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; */ const resolve = dir => path.join(__dirname, dir); // page title const name = defaultSettings.title || 'health-student'; // 生产环境,测试和正式 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV); const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用 outputDir: 'dist', // 生产环境构建文件的目录 lintOnSave: !IS_PROD, productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 devServer: { port: 9093, // 端口 open: false, // 启动后打开浏览器 hot: true, //热更新 client: { overlay: false //报错是否显示遮罩层,不显示 }, proxy: { // //配置跨域 // '/api': { // target: "https://test.xxx.com", // // ws:true, // changOrigin:true, // pathRewrite:{ // '^/api':'/' // } // } //配置跨域 '/java_api': { target: "http://127.0.0.1:8010/", // ws:true, changOrigin:true, pathRewrite:{ '^/java_api':'/' } } } }, css: { extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 sourceMap: false, loaderOptions: { scss: { // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders additionalData: ` @import "assets/css/mixin.scss"; @import "assets/css/variables.scss"; ` } } }, configureWebpack: config => { config.name = name; // 为生产环境修改配置... }, chainWebpack: config => { // 别名 alias config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('api', resolve('src/api')) .set('views', resolve('src/views')) .set('components', resolve('src/components')); /** * 设置保留空格 */ config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.compilerOptions.preserveWhitespace = true; return options; }) .end(); /** * 打包分析 */ if (IS_PROD) { /* config.plugin('webpack-report').use(BundleAnalyzerPlugin, [ { analyzerMode: 'static' } ]); */ } config // https://webpack.js.org/configuration/devtool/#development .when(!IS_PROD, config => config.devtool('cheap-source-map')); config.when(IS_PROD, config => { config.optimization.splitChunks({ chunks: 'all', cacheGroups: { // cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块 commons: { name: 'chunk-commons', test: resolve('src/components'), minChunks: 3, // 被至少用三次以上打包分离 priority: 5, // 优先级 reuseExistingChunk: true // 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。 }, node_vendors: { name: 'chunk-libs', chunks: 'initial', // 只打包初始时依赖的第三方 test: /[\\/]node_modules[\\/]/, priority: 10 }, vantUI: { name: 'chunk-vantUI', // 单独将 vantUI 拆包 priority: 20, // 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的 test: /[\\/]node_modules[\\/]_?vant(.*)/ } } }); config.optimization.runtimeChunk('single'); }); } });