本篇文章給大家談?wù)剉ue企業(yè)門戶網(wǎng)站模板，以及vue 企業(yè)網(wǎng)站對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、用vue單頁(yè)面做官網(wǎng)的必要性
• 2、這7個(gè) Vue 模式，可能你經(jīng)常用！但現(xiàn)在看對(duì)你很有幫助
• 3、怎么樣vue可以動(dòng)態(tài)解析后臺(tái)給的html模板？
• 4、Vue3基礎(chǔ)-模板語(yǔ)法
• 5、Primary:Vue{三、一個(gè)基于Vue的門戶網(wǎng)站(經(jīng)驗(yàn)踩坑)}

用vue單頁(yè)面做官網(wǎng)的必要性

單頁(yè)應(yīng)用程序(SPA)是加載單個(gè)HTML頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁(yè)面上完成，都由JavaScript來(lái)控制。因此，對(duì)單頁(yè)應(yīng)用來(lái)說模塊化的開發(fā)和設(shè)計(jì)顯得相當(dāng)重要。

優(yōu)點(diǎn)：

1、提供了更加吸引人的用戶體驗(yàn)：具有桌面應(yīng)用的即時(shí)性、網(wǎng)站的可移植性和可訪問性。

2、單頁(yè)應(yīng)用的內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，web應(yīng)用更具響應(yīng)性和更令人著迷。

3、單頁(yè)應(yīng)用沒有頁(yè)面之間的切換，就不會(huì)出現(xiàn)“白屏現(xiàn)象”,也不會(huì)出現(xiàn)假死并有“閃爍”現(xiàn)象

4、單頁(yè)應(yīng)用相對(duì)服務(wù)器壓力小，服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁(yè)面合成，吞吐能力會(huì)提高幾倍。

5、良好的前后端分離。后端不再負(fù)責(zé)模板渲染、輸出頁(yè)面工作，后端API通用化，即同一套后端程序代碼，不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端

這7個(gè) Vue 模式，可能你經(jīng)常用！但現(xiàn)在看對(duì)你很有幫助

說實(shí)話，閱讀文檔并不是我們大多數(shù)人喜歡的事情，但是當(dāng)使用像Vue這樣不斷發(fā)展的現(xiàn)代前端框架時(shí)，每一個(gè)新版本都會(huì)有所變化，我們很有可愛已經(jīng)錯(cuò)過了一些后來(lái)推出的新且好用的功能。

今天，刷碗智帶大家來(lái)看看那些有趣但不那么流行的功能。記住，所有這些都是官方Vue文檔的一部分。

在大型項(xiàng)目中，我們可能需要將組件分成小塊，只有在需要時(shí)才從服務(wù)器上加載。為了更容易做到這一點(diǎn)，Vue允許我們將組件定義為一個(gè)工廠函數(shù)，異步地解析組件定義。Vue只會(huì)在組件需要渲染的時(shí)候觸發(fā)工廠函數(shù)，并把結(jié)果緩存起來(lái)以備后面的重新渲染。2.3版的新內(nèi)容是，異步組件工廠還可以返回以下格式的對(duì)象。

使用這種方法，我們有額外的選項(xiàng)，包括加載和錯(cuò)誤狀態(tài)、組件獲取的延遲和超時(shí)。

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的時(shí)候你可能有一個(gè)組件，這個(gè)組件包含了大量靜態(tài)內(nèi)容。在這種情況下，我們可以在根元素上添加 v-once attribute 以確保這些內(nèi)容只計(jì)算一次然后緩存起來(lái)，就像這樣：

組件是可以在它們自己的模板中調(diào)用自身的。不過它們只能通過 name 選項(xiàng)來(lái)做這件事：

當(dāng)你使用 Vue.component 全局注冊(cè)一個(gè)組件時(shí)，這個(gè)全局的 ID 會(huì)自動(dòng)設(shè)置為該組件的 name 選項(xiàng)。

稍有不慎，遞歸組件就可能導(dǎo)致無(wú)限循環(huán)：

類似上述的組件將會(huì)導(dǎo)致 “max stack size exceeded” 錯(cuò)誤，所以請(qǐng)確保遞歸調(diào)用是條件性的 (例如使用一個(gè)最終會(huì)得到 false 的 v-if )。

當(dāng) inline-template 這個(gè)特殊的 attribute 出現(xiàn)在一個(gè)子組件上時(shí)，這個(gè)組件將會(huì)使用其里面的內(nèi)容作為模板，而不是將其作為被分發(fā)的內(nèi)容。這使得模板的撰寫工作更加靈活。

內(nèi)聯(lián)模板需要定義在 Vue 所屬的 DOM 元素內(nèi)。

指令的參數(shù)可以是動(dòng)態(tài)的。例如，在 v-mydirective:[argument]="value" 中， argument 參數(shù)可以根據(jù)組件實(shí)例數(shù)據(jù)進(jìn)行更新！這使得自定義指令可以在應(yīng)用中被靈活使用。

例如你想要?jiǎng)?chuàng)建一個(gè)自定義指令，用來(lái)通過固定布局將元素固定在頁(yè)面上。我們可以像這樣創(chuàng)建一個(gè)通過指令值來(lái)更新豎直位置像素值的自定義指令：

對(duì)于 .passive 、 .capture 和 .once 這些事件修飾符，Vue 提供了相應(yīng)的前綴可以用于 on：

修飾符前綴 .passive .capture! .once~ .capture.once 或.once.capture~!

例如：

對(duì)于所有其它的修飾符，私有前綴都不是必須的，因?yàn)槟憧梢栽谑录幚砗瘮?shù)中使用事件方法：

修飾符處理函數(shù)中的等價(jià)操作 .stopevent.stopPropagation() .preventevent.preventDefault() .selfif (event.target !== event.currentTarget) return 按鍵：.enter, .13if (event.keyCode !== 13) return (對(duì)于別的按鍵修飾符來(lái)說，可將 13 改為另一個(gè)按鍵碼) 修飾鍵：.ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (將 ctrlKey 分別修改為 altKey、shiftKey 或者 metaKey)

在Vue中，有幾種方法可以讓兩個(gè)組件進(jìn)行通信，所有這些方法都有優(yōu)點(diǎn)和缺點(diǎn)。 2.2 版本中引入的一種新方法是使用 Provide/Inject 的依賴注入。

這對(duì)選項(xiàng)一起使用，允許一個(gè)祖先組件作為其所有后代的依賴注入器，無(wú)論組件層次有多深，只要它們?cè)谕粋€(gè)父鏈上。如果你熟悉React，這與React的上下文功能非常相似。

今天就到這了，就這？

~完，我是刷碗智，疫情只能在家 LoL 了。

怎么樣vue可以動(dòng)態(tài)解析后臺(tái)給的html模板？

對(duì)于 vue 來(lái)說，模板本質(zhì)就是一個(gè)字符串

vue 中的模板是有邏輯的，是動(dòng)態(tài)的，如 v-if、v-for 等

與 html 格式很像，但有很大區(qū)別；html 是靜態(tài)的，而 vue 模板是動(dòng)態(tài)的

最終還是要轉(zhuǎn)化為 html 來(lái)顯示，怎么才能轉(zhuǎn)換為 html 來(lái)顯示呢？

模板最終必須轉(zhuǎn)換為 JS 代碼？

因?yàn)槟０逵羞壿?(v-if,v-for)，必須用 JS 才能實(shí)現(xiàn)(前端中只有 JS 是圖靈完備語(yǔ)言）

轉(zhuǎn)換為html渲染頁(yè)面，必須用 JS 才能實(shí)現(xiàn)渲染

因此模板最終要轉(zhuǎn)換為一個(gè) JS 函數(shù)(render 函數(shù))，（render 函數(shù)是指的渲染函數(shù)，并不一定就必須是 render 這個(gè)名字）

render函數(shù)

render 函數(shù)的 with 的用法

模板中，所有信息都包含在了 render 函數(shù)中

this 即 vm

price 就是 this.price，也是 vm.parice，也是 data.price

Vue3基礎(chǔ)-模板語(yǔ)法

如果我們希望把數(shù)據(jù)顯示到模板（template）中，使用最多的語(yǔ)法是 “Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值。

并且我們前端提到過，data返回的對(duì)象是有添加到Vue的響應(yīng)式系統(tǒng) 中，當(dāng)data中的數(shù)據(jù)發(fā)生改變時(shí)，對(duì)應(yīng)的內(nèi)容也會(huì)發(fā)生更新。

當(dāng)然，Mustache中不僅僅可以是data中的屬性，也可以是一個(gè)JavaScript的表達(dá)式：

下面這種寫法是語(yǔ)句不是表達(dá)式，所以是錯(cuò)誤的：

v-once用于指定元素或者組件只渲染一次，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，元素或者組件以及其所有的子元素將視為靜態(tài)內(nèi)容并且跳過，該指令可以用于性能優(yōu)化。

如果添加到父節(jié)點(diǎn)，那么所有的子節(jié)點(diǎn)也是只會(huì)渲染一次：

用于更新元素的 textContent，等價(jià)于"Mustache"語(yǔ)法，而且"Mustache"語(yǔ)法更靈活。

默認(rèn)情況下，如果我們展示的內(nèi)容本身是 html 的，那么vue并不會(huì)對(duì)其進(jìn)行特殊的解析。如果我們希望這個(gè)內(nèi)容被Vue可以解析出來(lái)，那么可以使用 v-html 來(lái)展示。

效果如下：

v-pre用于跳過元素和它的子元素的編譯過程，顯示原始的Mustache標(biāo)簽。

跳過不需要編譯的節(jié)點(diǎn)，加快編譯的速度。

效果如下：

這個(gè)指令保持在元素上直到關(guān)聯(lián)組件實(shí)例結(jié)束編譯。

v-cloak 和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到組件實(shí)例準(zhǔn)備完畢，主要用于解決閃動(dòng)問題，現(xiàn)在Vue3一般不會(huì)出現(xiàn)這個(gè)問題了。

div 不會(huì)顯示，直到編譯結(jié)束。

前面講的一系列指令，主要是將值插入到模板內(nèi)容中。但是，除了內(nèi)容需要?jiǎng)討B(tài)來(lái)決定外，某些屬性我們也希望動(dòng)態(tài)來(lái)綁定。比如動(dòng)態(tài)綁定a元素的href屬性，動(dòng)態(tài)綁定img元素的src屬性。

綁定屬性我們使用 v-bind: ，縮寫 : ，用于動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式。

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值（這個(gè)學(xué)到組件時(shí)再介紹），在開發(fā)中，有哪些屬性需要?jiǎng)討B(tài)進(jìn)行綁定呢？還是有很多的，比如圖片的鏈接src、網(wǎng)站的鏈接href、動(dòng)態(tài)綁定一些類、樣式等等。

v-bind有一個(gè)對(duì)應(yīng)的語(yǔ)法糖，也就是簡(jiǎn)寫方式，在開發(fā)中，我們通常會(huì)使用語(yǔ)法糖的形式，因?yàn)楦?jiǎn)潔。

注意 ：Vue2 template模板中只能有一個(gè)根元素，Vue3 template模板中允許有多個(gè)根元素。

在開發(fā)中，有時(shí)候我們的元素class也是動(dòng)態(tài)的，比如：當(dāng)數(shù)據(jù)為某個(gè)狀態(tài)時(shí)，字體顯示紅色，當(dāng)數(shù)據(jù)另一個(gè)狀態(tài)時(shí)，字體顯示黑色。

綁定class有兩種方式：對(duì)象語(yǔ)法，數(shù)組語(yǔ)法。

① 對(duì)象語(yǔ)法：我們可以傳給 :class (v-bind:class 的簡(jiǎn)寫) 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class。

② 數(shù)組語(yǔ)法：我們可以把一個(gè)數(shù)組傳給 :class，以應(yīng)用一個(gè) class 列表；

我們可以利用v-bind:style來(lái)綁定一些CSS內(nèi)聯(lián)樣式，這是因?yàn)槟承邮轿覀冃枰鶕?jù)數(shù)據(jù)動(dòng)態(tài)來(lái)決定，比如某段文字的顏色，大小等等。

CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名。

綁定style有兩種方式：對(duì)象語(yǔ)法，數(shù)組語(yǔ)法。

① 對(duì)象語(yǔ)法：

② 數(shù)組語(yǔ)法： :style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上

在某些情況下，我們屬性的名稱可能也不是固定的。

前面我們無(wú)論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=“值” 的格式來(lái)定義，這種綁定的方式，我們稱之為動(dòng)態(tài)綁定屬性。

如果我們希望將一個(gè)對(duì)象的所有屬性，綁定到元素上的所有屬性，應(yīng)該怎么做呢？非常簡(jiǎn)單，我們可以直接使用 v-bind 綁定一個(gè)對(duì)象。

如下：info對(duì)象會(huì)被拆解成div的各個(gè)屬性。

前面我們綁定了元素的內(nèi)容和屬性，在前端開發(fā)中另外一個(gè)非常重要的特性就是交互。

在前端開發(fā)中，我們需要經(jīng)常和用戶進(jìn)行各種各樣的交互，這個(gè)時(shí)候，我們就必須監(jiān)聽用戶發(fā)生的事件，比如點(diǎn)擊、拖拽、鍵盤事件等等。

在Vue中如何監(jiān)聽事件呢？使用v-on指令。接下來(lái)我們來(lái)看一下v-on的用法：

我們可以使用v-on來(lái)監(jiān)聽一下點(diǎn)擊的事件：

v-on:click可以寫成@click，是它的語(yǔ)法糖寫法：

當(dāng)然，我們也可以綁定其他的事件：

如果我們希望一個(gè)元素綁定多個(gè)事件，這個(gè)時(shí)候可以傳入一個(gè)對(duì)象：

當(dāng)通過methods中定義方法，以供@click調(diào)用時(shí)，需要注意參數(shù)問題：

情況一：如果該方法不需要額外參數(shù)，那么方法后的()可以不添加，并且方法的實(shí)現(xiàn)不用參數(shù)，直接就可以打印event。

情況二：如果需要同時(shí)傳入某個(gè)參數(shù)和event時(shí)，可以通過$event傳入事件，并且方法的實(shí)現(xiàn)必須按順序?qū)懨鲄?shù)。

@keyup.enter 代表enter鍵彈起的時(shí)候會(huì)調(diào)用onEnter方法，我們一般在方法里面獲取輸入的值：

在某些情況下，我們需要根據(jù)當(dāng)前的條件決定某些元素或組件是否渲染，這個(gè)時(shí)候我們就需要進(jìn)行條件判斷了。

Vue提供了下面的指令來(lái)進(jìn)行條件判斷：

下面我們來(lái)對(duì)它們進(jìn)行學(xué)習(xí)。

v-if、v-else、v-else-if 用于根據(jù)條件來(lái)渲染某一塊的內(nèi)容，這些內(nèi)容只有在條件為true時(shí)，才會(huì)被渲染出來(lái)，這三個(gè)指令與JavaScript的條件語(yǔ)句 if、else、else if 類似。

v-if 的渲染原理：v-if是惰性的，當(dāng)條件為false時(shí)，其判斷的內(nèi)容完全不會(huì)被渲染或者會(huì)被銷毀掉，當(dāng)條件為true時(shí)，才會(huì)真正渲染條件塊中的內(nèi)容。

因?yàn)関-if是一個(gè)指令，所以必須將其添加到一個(gè)元素上，但是如果我們希望切換的是多個(gè)元素呢？

如果此時(shí)我們使用div包裹，div會(huì)被渲染到界面上來(lái)，但是我們并不希望div被渲染，這個(gè)時(shí)候，我們可以選擇使用template，template元素可以當(dāng)做不可見的包裹元素，并且 v-if 可以添加到 template 上，但是最終template不會(huì)被渲染出來(lái)，類似于小程序中的block。

v-show和v-if的用法看起來(lái)是一致的，也是根據(jù)一個(gè)條件決定是否顯示元素或者組件。

首先，在用法上的區(qū)別：

其次，本質(zhì)的區(qū)別：

開發(fā)中如何進(jìn)行選擇呢？

在真實(shí)開發(fā)中，我們往往會(huì)從服務(wù)器拿到一組數(shù)據(jù)，并且需要對(duì)其進(jìn)行渲染。這個(gè)時(shí)候我們可以使用v-for來(lái)完成，v-for類似于JavaScript的for循環(huán)，可以用于遍歷一組數(shù)據(jù)。

v-for的基本格式是 "item in 數(shù)組" ，數(shù)組通常是來(lái)自data或者prop，也可以是其他方式，item是我們給每項(xiàng)元素起的一個(gè)別名，這個(gè)別名可以自定來(lái)定義。

我們知道，在遍歷一個(gè)數(shù)組的時(shí)候會(huì)經(jīng)常需要拿到數(shù)組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數(shù)組" ，注意順序，數(shù)組元素項(xiàng)item在前面，索引項(xiàng)index在后面。

類似于v-if，你可以使用 template 元素來(lái)循環(huán)渲染一段包含多個(gè)元素的內(nèi)容。

我們使用template來(lái)對(duì)多個(gè)元素進(jìn)行包裹，而不是使用div來(lái)完成，因?yàn)閐iv會(huì)被渲染，template不會(huì)被渲染。而且如果有ul，ul里面不推薦放div，只推薦放li。

Vue 將被偵聽的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新，這些被包裹過的方法包括：

上面的方法會(huì)直接修改原來(lái)的數(shù)組，所以視圖會(huì)跟著更新。但是某些方法不會(huì)替換原來(lái)的數(shù)組，而是會(huì)生成新的數(shù)組，比如 filter()、concat() 和 slice()，這時(shí)候我們可以通過重新賦值的方式觸發(fā)視圖更新，如下：

在使用v-for進(jìn)行列表渲染時(shí)，我們通常會(huì)給元素或者組件綁定一個(gè)key屬性。

這個(gè)key屬性有什么作用呢？

我們先來(lái)看一下官方的解釋：key屬性主要用在Vue的虛擬DOM算法，在新舊nodes對(duì)比時(shí)辨識(shí)VNodes。如果不使用key，Vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法，而使用key時(shí)，它會(huì)基于key的變化重新排列元素順序，并且會(huì)移除/銷毀key不存在的元素。

官方的解釋對(duì)于初學(xué)者來(lái)說并不好理解，比如下面的問題：

什么是新舊nodes，什么是VNode？

沒有key的時(shí)候，如何嘗試修改和復(fù)用的？

有key的時(shí)候，如何基于key重新排列的？

我們先來(lái)解釋一下VNode的概念：

VNode的全稱是Virtual Node，也就是虛擬節(jié)點(diǎn)。事實(shí)上，無(wú)論是組件還是元素，它們最終在Vue中表示出來(lái)的都是一個(gè)個(gè)VNode。VNode的本質(zhì)是一個(gè)JavaScript的對(duì)象。

如果我們不只是一個(gè)簡(jiǎn)單的div，而是有一大堆的元素，那么它們應(yīng)該會(huì)形成一個(gè)VNode Tree。

我們先來(lái)看一個(gè)案例：這個(gè)案例是當(dāng)我們點(diǎn)擊按鈕時(shí)會(huì)在li中間插入一個(gè)f。

我們可以確定的是，這次更新對(duì)于ul和button是不需要進(jìn)行更新，需要更新的是我們li的列表。在Vue中，對(duì)于相同父元素的子元素節(jié)點(diǎn)并不會(huì)重新渲染整個(gè)列表，因?yàn)閷?duì)于列表中 a、b、c、d它們都是沒有變化的。在操作真實(shí)DOM的時(shí)候，我們只需要在中間插入一個(gè)f的li即可。

那么Vue中對(duì)于列表的更新究竟是如何操作的呢？

Vue事實(shí)上會(huì)對(duì)于有key和沒有key會(huì)調(diào)用兩個(gè)不同的方法，有key，那么就調(diào)用 patchKeyedChildren方法，沒有key，那么就調(diào)用 patchUnkeyedChildren方法。

沒有key的diff算法：

我們會(huì)發(fā)現(xiàn)上面的diff算法效率并不高，c和d來(lái)說它們事實(shí)上并不需要有任何的改動(dòng)，但是因?yàn)槲覀兊腸被f所使用了，所有后續(xù)所有的內(nèi)容都要一次進(jìn)行改動(dòng)，并且最后進(jìn)行新增。

有key的diff算法：

所以我們可以發(fā)現(xiàn)，Vue在進(jìn)行diff算法的時(shí)候，會(huì)盡量利用我們的key來(lái)進(jìn)行優(yōu)化操作，在沒有key的時(shí)候我們的效率是非常低效的，在進(jìn)行插入或者重置順序的時(shí)候，保持相同的key可以讓diff算法更加的高效。

Primary:Vue{三、一個(gè)基于Vue的門戶網(wǎng)站(經(jīng)驗(yàn)踩坑)}

使用框架時(shí)必須熟知框架指令特性！很重要；

Bootstrap+jQuery是很好的選擇！

庫(kù)：? ? ? ? ? 1.i18n(雙語(yǔ)言切換)；

? ? ? ? ? ? ? ? ? 2.vue-router(路由）；

? ? ? ? ? ? ? ? ? 3.vuex(狀態(tài)管理，需要進(jìn)行雙語(yǔ)言切換監(jiān)聽變化)；

? ? ? ? ? ? ? ? ? 4.ElementUI(餓了么以電腦端為主得UI框架)；

? ? ? ? ? ? ? ? ? 5.sass(css預(yù)處理)；

? ? ? ? ? ? ? ? ? 6.echarts(需要K線圖，個(gè)人推薦不要用echarts,太大)；

? ? ? ? ? ? ? ? ? 7.axios(相對(duì)于fetch兼容性好，請(qǐng)求數(shù)據(jù))

IE的坑：1.走馬燈之前用的是swiper的，結(jié)果兼容性不好，4.0+兼容不好，3.0主要以移動(dòng)端為主，

? ? ? ? ? ? ? ? 之后換成了ElementUI的走馬燈又引導(dǎo)出無(wú)法覆蓋ElementUI的樣式，因?yàn)閂UE是默認(rèn)全局覆蓋局部，再加一個(gè)style，不要加scoped,ElementUI是全局引入！? 解決問題。

? ? ? ? ? ? ? ? 2.經(jīng)驗(yàn)不足，IE9不支持flex,坑、坑、坑移動(dòng)端寫習(xí)慣了！

? ? ? ? ? ? ? ? 3.多行文本省略只支持webkit內(nèi)核瀏覽器，又是坑，用js控制長(zhǎng)度搞定！

? ? ? ? ? ? ? ? 4.低版本兼容引入babel-polyfill，將build?webpack.base.conf.js里entry修改為entry: {'babel-polyfill': 'babel-polyfill',app: './src/main.js'},

? ? ? ? ? ? 5.使用axios低版本兼容?es6-promise包，在main.js里引用

????????????????import promise from 'es6-promise'

????????????????promise.polyfill()

打包：1.history模式：需要服務(wù)器端配置請(qǐng)看官網(wǎng)；不需要改任何東西，路由里加mode:history即可

? ? ? ? ? ?2.hash模式：將config里index.js里的 assetsPublicPath: '/'? ?改為assetsPublicPath: './',即可訪問靜態(tài)資源；

? ? ? ? ? ?3.打包體積：將config里index.js里的productionSourceMap: true, 改為?productionSourceMap: false，或者待打包完之后手動(dòng)刪除Map文件；

? ? ? ? ? ? 4.路由懶加載（具體看官網(wǎng)很簡(jiǎn)單）；

? ? ? ? ? ? 5.第三方包分離將build?webpack.base.conf.js里添加

????????????????????externals:{；

? ? ????????????????????'echarts':"echarts"

????????????????????? },

? ? ? ? ? ? 6.打包后css背景圖無(wú)法訪問，將build? ?utils.js里添加? publicPath: '../../',

? ? ? ? 7.sass配置（webpack.base.conf.js）

????{ test: /\.scss$/, loaders: ["style", "css", "sass"]},

如有寫錯(cuò)的地方歡迎大家評(píng)論

關(guān)于vue企業(yè)門戶網(wǎng)站模板和vue 企業(yè)網(wǎng)站的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。