vue.config.js配置(杜桂)

vue.config.js配置(杜桂)use strict const path require path const defaultSetti require src config index js const BundleAnalyz require

大家好,我是讯享网,很高兴认识大家。
'use strict' 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 || 'vue mobile template' // 生产环境,测试和正式 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) module.exports = { 
    publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用 outputDir: 'nenglitupu-mobile', // 生产环境构建文件的目录 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: !IS_PROD, productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 devServer: { 
    port: 9020, // 端口 open: false, // 启动后打开浏览器 overlay: { 
    // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 warnings: false, errors: true } // proxy: { 
    // //配置跨域 // '/api': { 
    // target: "https://test.xxx.com", // // ws:true, // changOrigin:true, // pathRewrite:{ 
    // '^/api':'/' // } // } // } }, css: { 
    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 sourceMap: false, loaderOptions: { 
    scss: { 
    // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders prependData: ` @import "assets/css/mixin.scss"; @import "assets/css/variables.scss"; ` } } }, configureWebpack: config => { 
    config.name = '能力图谱' }, chainWebpack: config => { 
    config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // 别名 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 .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [ { 
    // 将 runtime 作为内联引入不单独存在 inline: /runtime\..*\.js$/ } ]) .end() 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') }) } } 

讯享网
小讯
上一篇 2025-03-30 19:29
下一篇 2025-03-08 08:37

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/24349.html