vue項目總結（一）

jackzou 發布于2019-08-21 11:38 / 2434人閱讀

摘要：獨立構建運行時構建目的優化項目中文件的體積。項目本身入手，改獨立編譯為運行時編譯去掉項目中的選項，改為選項。因為在我的項目里主要是這個文件占據了比較大的空間而導致終端有提示文件太大，所以，改成運行時編譯對于我來說，基本上就解決問題了。

Vue 獨立構建 & 運行時構建

-- KChris 2017.3.13 (=^.^=)

目的：優化項目中文件的體積。

1.config/index.js

npm install --save-dev compression-webpack-plugin
productionGzip: true

//Gzip off by default as many popular static hosts
//such as Surge or Netlify already gzip all static assets for you.

2.查看編譯后各文件體積大小等信息

1）直接用 npm 命令：

npm run build --report

2）用 webpack 命令：

webpack --config build/webpack.dev.conf.js
webpack --config builg/webpack.dev.conf.js  --profile --json => stats.json

結合：http://alexkuz.github.io/webp... 或者 http://webpack.github.io/anal... 上傳 json 文件生成圖表

Note: 不要小看這個步驟，這對于你優化項目文件的體積非常重要，它會引導你從哪些文件入手進行你的優化。從這里，我發現 vue.common.js 這個文件占了我很大的內存空間，于是，我才會在 Google 上搜索這個文件，然后發現 vue2.x 中，它的編譯分獨立構建和運行構建，再一步步地慢慢找到下面步驟的。

3.Vue 項目本身入手，改獨立編譯為運行時編譯

1）build/webpack.base.conf.js

alis： {
    "vue$": "vue/dist/vue.runtime.common.js"
}
// change vue.common.js to vue.runtime.common.js

2) 去掉項目中的 template 選項，改為 render 選項。

new Vue({
    render: function(h) {
        return h("App")
    }
})
// remove template options: template: ""

ok,在這里我們就將 vue 的獨立構建改成運行時構建了。這時，我們再 npm run build，會發現，文件體積確實變小了很多，也沒有了之前的 warning 提示。因為在我的項目里主要是 vue.common.js 這個文件占據了比較大的空間而導致終端有 warning 提示文件太大，所以，改成運行時編譯對于我來說，基本上就解決問題了。

云服務器 GPU云服務器外呼項目總結云服務器搬遷項目總結云服務器搭建vue項目騰訊云服務器部署vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86948.html

vue 項目總結一文件夾結構配置

摘要：文件夾結構文件夾里的文件夾設置是靈活的，可以根據自己的習慣進行，不必雷同。對文件夾配置的總結先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結，有需要的可以去看看。之前一段時間都在使用 vue 開發后臺管理系統，在摸索的過程中對 vue 本身和模塊化、規范化開發有了更深的認知，現在記錄下來，希望對其他需要開發項目的人有幫助。項目配置首先，在確定好使用的框架和組件庫后，先...

spacewander 2019-08-02 16:00 評論0 收藏0
vue 項目總結一文件夾結構配置

摘要：文件夾結構文件夾里的文件夾設置是靈活的，可以根據自己的習慣進行，不必雷同。對文件夾配置的總結先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結，有需要的可以去看看。之前一段時間都在使用 vue 開發后臺管理系統，在摸索的過程中對 vue 本身和模塊化、規范化開發有了更深的認知，現在記錄下來，希望對其他需要開發項目的人有幫助。項目配置首先，在確定好使用的框架和組件庫后，先...

wind5o 2019-08-22 11:15 評論0 收藏0
基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0
【Vue項目總結】項目nginx部署

摘要：項目開發完成，接下來是上線，關于項目的部署，我司前端是部署在服務器上，關于的相關文檔，請自行查閱本文只記錄部署時碰到的一些問題。其他總結文章常規打包優化方案組件通信處理方案后臺管理項目總結項目開發完成，接下來是上線，關于vue項目的部署，我司前端是部署在nginx服務器上，關于nginx的相關文檔，請自行查閱；本文只記錄部署時碰到的一些問題。打包 vue項目打包后，是生成一系列的靜...

CntChen 2019-07-25 14:50 評論0 收藏0