1. 程式人生 > >Vue 懶載入元件 路徑不對

Vue 懶載入元件 路徑不對

最近在使用VueRouter的懶載入元件的時候.

const routes = [

    {
        path: '/',
        component: App
    },
    {
        path: '/category',
        component: resolve => {require(['./components/Category.vue'], resolve)}
    }
]

但是在載入/category的時候,我發現會報錯。

原來webpack會把這個懶載入單獨載入一個js,預設按照
0.app.js 1.app.js ……的順序載入的

通過簡單的debug發現是0.app.js的路徑不對

通過webpack的設定即可解決(我使用的laravel,配置根據情況自行修改)

Elixir.webpack.mergeConfig({
    module: {
        loaders: [
            {
                test: /\.css/,
                loader: "style!css"
            }

        ]
    },
    output: {
        publicPath: "js/"
    }
})

配置下output下的publicPath即可。

相關推薦

Vue 載入元件 路徑不對

最近在使用VueRouter的懶載入元件的時候. const routes = [ { path: '/', component: App }, { path: '/category

vue 載入元件chunk相對路徑混亂問題

問題描述: 在vue專案中用vue-router做路由,做程式碼分割和懶載入時,由於webpack配置不當,導致懶載入chunk時相對路徑出現混亂導致載入chunk失敗,具體如下: //router

vue-cli按需載入載入元件

vue來做一個單頁面應用,當我們的專案越來越大,元件越來越多的時候,首次啟動專案戶特別慢,就算做一個載入框,蒙層之類的,體驗也不會好,這個時候就需要按需載入1.什麼叫按需載入            所謂按需載入,顧名思義,就是當我需要的時候再給我,我不要的時候,你就老老實實待

Vue載入的學習

文章參考 VUE2元件懶載入淺析 VUE+Webpack 實現懶載入的三種方式 路由懶載入 Vue官方寫法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) exp

使用Webpack的程式碼分離實現Vue載入(譯文)

當一個Vue的專案體積變得十分龐大的時候,使用Webpack的程式碼分離功能將Vue Components,routes或Vuex的程式碼進行分離並按需載入,會極大的提高App的首屏載入速度。 在Vue的專案中,我們可以在三種不同的情況下使用懶載入和程式碼分離功能: Vue元

vue 載入

一、定義:懶載入也叫延遲載入,即按需載入, 二、為什麼需要懶載入: 在單頁應用中,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,延時過長,不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔

使用Webpack的程式碼分離實現Vue載入

當一個Vue的專案體積變得十分龐大的時候,使用Webpack的程式碼分離功能將Vue Components,routes或Vuex的程式碼進行分離並按需載入,會極大的提高App的首屏載入速度。 在Vue的專案中,我們可以在三種不同的情況下使用懶載入和程式碼分離功能: Vue元件,也稱為非同步元件

jQuery.imgLazyLoad圖片載入元件

$.extend({ imgLazyLoad: function(options) { var config = { container: 'body', tabItemSelector: '',

vue 載入,開發環境不適用,生產環境才適用

router.jsimport Vue from 'vue' import Router from 'vue-router' //開發環境不適用懶載入 const _import = require('./_import_' + process.env.NODE_ENV);

解決Python下載入檔案路徑不對的問題

第一次玩Python,出現了在特定檔案目錄下的檔案不能夠被在shell被載入,在百度看見了這種解決方案。 http://jingyan.baidu.com/article/f7ff0bfc1eee322e26bb1391.html

Web圖片載入元件—Lazyload

在Web專案中,大量的圖片應用會導致頁面載入時間過長,浪費不必要的頻寬成本,還會影響使用者瀏覽體驗。 Lazyload 是一個檔案大小僅4kb的圖片懶載入元件(不依賴其它第三方庫),元件會根據使用者當前瀏覽的區域去自動載入對應的圖片(使用者還沒有瀏覽的區域圖片

開發vue延遲載入元件

vue的單頁面應用訪問速度一般情況下已經很快了,不過對於比較複雜的頁面首次開啟的時候會很慢,慢的原因呢主要涉及如下兩個方面:1、dom元素較多,首次開啟時需要進行太多的渲染和判斷,而這些渲染和判斷大多數往往都不是首次開啟頁面時需要消耗的。2、多數首次不顯示的的dom元素,或者

vue非同步元件元件載入(解決import不能匯入變數字串的路徑問題)

在寫專案的時候,需要動態配置路由選單,所有的選單都是通過配置生成的,這就意味著選單的路徑(在vue開發專案裡面就是一個字串的路徑)需要非同步載入進去,但是由於對webpack的import不是很熟悉,所以就有一下的坑需要填了 錯誤的原因分析 _import.js module.e

vue路由元件載入介紹及使用

一、什麼是懶載入 在vue中元件懶載入又稱為程式碼分割,也叫延遲載入,即在需要的時候進行載入,隨用隨載。 二、為什麼要使用路由元件懶載入 像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長

【116】vue-router使用載入機制,在生產環境中,如何避免瀏覽器快取Webpack 3 編譯後生成的js路徑,導致404錯誤。(二)

整理思路 要解決這個問題,F5 重新整理是最好的解決辦法。但是每次釋出新版本後,都要求使用者主動按 F5 重新整理瀏覽器,會讓使用者覺得不方便。這對於快速迭代的產品來說尤其突出。 所以為了方便使用者使用,我們希望當前端頁面修改之後,系統能夠自動重新整理頁

【115】vue-router使用載入機制,在生產環境中,如何避免瀏覽器快取Webpack 3 編譯後生成的js路徑,導致404錯誤。(一)

前言 為了適應不斷變化的市場需求,軟體產品需要持續部署。生產環境的部署週期往往短則一週,長則半個月。在這一持續部署的過程中,前端開發人員要面臨一個問題:生產環境部署了新版本的程式碼後,如果使用者沒有 F5 重新整理瀏覽器,就會導致瀏覽器快取Webpack 3

vue-router元件載入

元件懶載入,跟圖片懶載入類似,即需要使用此元件的時候,才載入此元件,由此可避免在載入首頁的時候載入所有的元件。實現元件懶載入,需要設定router下面的index.js檔案:import Vue from 'vue'import Router from 'vue-router

vue 元件按需引用,vue-router載入vue打包優化,載入動畫

當打包構建應用時,Javascript 包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。結合 Vue 的 非同步元件 和 Webpack 的 code splitting feature

vue路由非同步元件載入案例

最近研究了vue效能優化,涉及到vue非同步元件和懶載入。一番研究得出如下的解決方案。原理:利用webpack對程式碼進行分割是懶載入的前提,懶載入就是非同步呼叫元件,需要時候才下載。案例:首先是元件,建立四個元件分別命名為first、second、three和four;內容

vue.js 部署到tomcat中出現訪問路徑不對,頁面載入不出來問題及解決

問題:vue.js 部署到tomcat上之後,訪問index.html檔案,開啟瀏覽器控制檯,出現css,js,img等路徑不對,返回404. 打包路徑: +dist +stati