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