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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM