VUE---项目打包

当项目做完，要执行 npm run build 打包最终的结果（最终的结果会打包进dist文件夹）。

一、配置

在vue.config.js中添加以下内容：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 如果打包结果，希望以File协议（双击打开），需要加如下的配置：
  publicPath: '', // 这个值 写成 空字符串，或者 './' 都可以

  // 下面的配置，作用是取消生成 xxx.map 文件
  productionSourceMap: false
})

二、生成打包报告

在 package.json 中，build命令后，加入 –report ，这样的话，打包之后就会生成一个 report.html 文件，这个文件就记录着打包的结果的详细信息。通过这个文件，我们可以知道打包后项目文件的详细信息，从而有针对性的对文件进行压缩或者改为CDN方式引用。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build --report",
  "lint": "vue-cli-service lint"
},

report.html的内容如下所示：

VUE---项目打包

从上图可知，dashboard文件最大，原因是该页面引用了echarts包，我们可将echarts的引入改为CDN引入。

三、优化打包的体积

在index.html中加载 CDN 链接，使用其他网站的 axios、echarts、element-ui 等等。并在vue.config.js中配置，在打包时排除第三方包。

以echarts为例：

1、在index.html文件中引入echarts.js文件


  
    
    
    
    <link rel="icon" href="favicon.ico">
    
  
  
    
      We're sorry but  doesn't work properly without JavaScript enabled. Please enable it to continue.

2、在vue.config.js文件中，添加configureWebpack配置，排除第三方包

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 如果打包结果，希望以File协议（双击打开），需要加如下的配置：
  publicPath: '', // 这个值 写错 空字符串，或者 './' 都可以

  // 下面的配置，作用是取消生成 xxx.map 文件
  productionSourceMap: false,

  // 配置排除哪些第三方包
  configureWebpack: {
    // 排除项
    externals: {
      // 键(第三方包名--package.json中的名字): 值(window对象中多了什么)
      echarts: 'echarts',
    }
  }
})