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