Blame view

vue.config.js 5.66 KB
406803045 committed
1
const path = require('path')
2
const defaultSettings = require('./src/config/index.js')
宋楠 committed
3 4 5 6 7
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const resolve = dir => path.join(__dirname, dir)
// page title
const name = defaultSettings.title || 'vue mobile template'
8
// 生产环境,测试和正式
宋楠 committed
9
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
10 11

const { defineConfig } = require('@vue/cli-service')
宋楠 committed
12
// externals
sunnie committed
13 14 15 16 17 18 19
// const externals = {
//   vue: 'Vue',
//   'vue-router': 'VueRouter',
//   vuex: 'Vuex',
//   vant: 'vant',
//   axios: 'axios'
// }
宋楠 committed
20 21
// CDN外链,会插入到index.html中
// const cdn = {
sunnie committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
//   // 开发环境
//   dev: {
//     css: [],
//     js: []
//   },
//   // 生产环境
//   build: {
//     css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
//     js: [
//       'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
//       'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
//       'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
//       'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
//       'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
//     ]
//   }
宋楠 committed
38 39
// }

40
module.exports = defineConfig({
sunnie committed
41 42 43 44
  publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
  //  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生产环境构建文件的目录
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
sunnie committed
45
  lintOnSave: !IS_PROD,
sunnie committed
46
  productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
406803045 committed
47
  devServer: {
sunnie committed
48 49
    port: 9020, // 端口
    open: false, // 启动后打开浏览器
50 51 52 53 54 55
    client: {
      overlay: {
        //  当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
        warnings: false,
        errors: true
      }
宋楠 committed
56
    }
sunnie committed
57 58 59 60
    // proxy: {
    //   //配置跨域
    //   '/api': {
    //       target: "https://test.xxx.com",
sunnie committed
61
    //       // ws:true,
sunnie committed
62 63 64 65 66 67
    //       changOrigin:true,
    //       pathRewrite:{
    //           '^/api':'/'
    //       }
    //   }
    // }
406803045 committed
68
  },
sunnie committed
69
  css: {
70
    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sunnie committed
71 72 73 74 75
    sourceMap: false,
    loaderOptions: {
      scss: {
        // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
76
        additionalData: `
宋楠 committed
77 78
          @import "assets/css/mixin.scss";
          @import "assets/css/variables.scss";
sunnie committed
79 80 81 82 83
          $cdn: "${defaultSettings.$cdn}";
          `
      }
    }
  },
84
  configureWebpack: config => {
宋楠 committed
85
    config.name = name
sunnie committed
86

87
    // 为生产环境修改配置...
sunnie committed
88 89 90
    // if (IS_PROD) {
    //   // externals
    //   config.externals = externals
宋楠 committed
91
    // }
92
  },
宋楠 committed
93 94

  chainWebpack: config => {
406803045 committed
95 96
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
宋楠 committed
97 98

    // 别名 alias
99 100 101
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
宋楠 committed
102
      .set('api', resolve('src/api'))
103 104
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
sunnie committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    // config.plugin('html').tap(args => {
    //   if (IS_PROD) {
    //     args[0].cdn = cdn.build
    //   } else {
    //     args[0].cdn = cdn.dev
    //   }
    //   return args
    //  })

    /**
     * 设置保留空格
     */
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()
    /**
     * 打包分析
     */
宋楠 committed
133 134 135 136 137 138 139
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
sunnie committed
140 141 142
    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(!IS_PROD, config => config.devtool('cheap-source-map'))
406803045 committed
143

sunnie committed
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
    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')
    })
406803045 committed
181
  }
182
})