vue系列之项目打包以及优化（最新版）

vue完成项目后，如何打包成静态文件，

打包：

1、vue.config.js配置，如果用默认的，打包以后，会找不到文件

// 公共路径(必须有的)
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 静态资源存放的文件夹(相对于ouputDir)
assetsDir: "assets",
productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建

2、修改axios的url配置

打包成静态文件以后，将dist文件里的内容拷贝到tomcat的文件夹，启动tomcat，路径加文件名就可以访问到项目

优化：

在package.json的build后面添加--report，打包以后可以生成report.html文件，用来查看打包以后各文件的大小

今天讲项目打包以后，总大小是10MB，发现主要是element-ui、echarts和jquery大

解决办法是：

1、把这些使用cdn引入，放在index.html文件

    <script crossorigin="anonymous" integrity="sha384-9Jr6d8CsEUcQUN6knni8ysVfdmxMXdMdsVxZg11vjeNemsCcm8GSxFhWFgHRtn31" src="https://lib.baomitu.com/echarts/4.2.1/echarts-en.common.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.1.1"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

2、在vue.config.js配置

configureWebpack:() => {
    return {
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'echarts': 'echarts',
        // 'jquery': 'jquery',
        'element-ui': 'ELEMENT',
        // 'lodash': 'lodash',
        'html2canvas': 'html2canvas'
      }
    }
  },

在测试中发现，jquery和lodash在项目启动后，会提示找不到，不知道为什么，注销以后就可以了

3、main.js

import ElementUI from 'element-ui'

Vue.use(ElementUI)

删除

Vue.prototype.$echarts = echarts

删除组件里直接用 echarts调用

4、备注：

（1）、启动项目之前，运行npm install

（2）、element-ui和vuex还是需要npm 安装的

因为项目中有引入这俩快内容

store index.js