1. 程式人生 > >vue專案打包後開啟空白解決辦法

vue專案打包後開啟空白解決辦法

vue專案打包後一片空白解決辦法

網上很多說自己的VUE專案通過Webpack打包生成的list檔案,放到HBulider打包後,通過手機開啟一片空白。這個主要原因是路徑的問題。

1、記得改一下config下面的index.js中bulid模組匯出的路徑。因為index.html裡邊的內容都是通過script標籤引入的,而你的路徑不對,開啟肯定是空白的。先看一下預設的路徑。

module.exports = {
  build: {
    env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'
), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true,

assetsPublicPath預設的是  ‘/’  也就是根目錄。而我們的index.html和static在同一級目錄下面。  所以要改為  ‘./ ’

2、另外還需要注意一點。src裡邊router/index.js路由配置裡邊預設模式是hash,如果你改成了history模式的話,開啟也會是一片空白。所以改為hash或者直接把模式配置刪除,讓它預設的就行 。

如果非要使用history模式的話,需要你在服務端加一個覆蓋所有的情況的候選資源:如果URL匹配不到任何靜態資源,則應該返回一個index.html,這個頁面就是你app依賴頁面。

// mode: 'history'  // 預設hash

相關推薦

vue專案打包開啟空白解決辦法

vue專案打包後一片空白解決辦法 網上很多說自己的VUE專案通過Webpack打包生成的list檔案,放到HBulider打包後,通過手機開啟一片空白。這個主要原因是路徑的問題。 1、記得改一下con

vue專案打包之後頁面空白解決辦法

之前專案遇到個情況,npm run build打包之後上傳到伺服器後,index.html開啟一片空白,資源都載入了,但是就是不顯示。 然後百度找了原因,修改了兩處地方 一、修改 assetsPublicPath  在config/index.js裡面,有個 assetsPublicPath

vue專案打包首頁一片空白解決辦法和具體原因總結

很高興在萬千文章中你看到本章,希望能為你解決問題!!! 在最初用vue+webpack+vue-router做專案的時候,在本地pc開發測試都是正常的,但是在把程式碼打包部署到測試伺服器之後,訪問專案首頁總是白屏。 第一種,打包後的dist目錄下的檔案引用路徑不對,會因找不到檔案而報

vue專案中 vendor打包過大解決辦法

vendor打包過大的原因就是引用三方外掛的js太大了 ,可以直接引用映象解決問題 解決辦法如下 1.在webpack.base.conf.js中新增配置項 表示webpack不需打包的檔案 ,‘外掛名’: '專案中別名' 2.在index.html中引入相應映象檔

vue2.0專案CSS3動畫打包動畫失效解決辦法

vue2.0 + webpack做專案時,css3動畫打包前正常,打包後失效,原因是: vue-cli腳手架package.json配置檔案裡面對瀏覽器的版本做了css的字首處理 "browsersli

vue專案打包,npm run build相關配置,以及解決專案打包,圖片404,背景圖片找不到,iview程式碼出問題的情況

1.首先找到config下的index.js檔案 將build下的assetsPublicPath的斜槓換成./ 操作如下 只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過後 npm run dev的時候直接出現can not Ge

vue學習十二 vue專案打包介面開啟報錯 404

專案進展到最後,vue框架即將完工了,在最後到打包中,又遇到一個大坑 npm run build 在執行命令打包後,發現開啟dist檔案內的index.html後,介面空白,並且在控制檯處報錯為404,查詢不到對應到css。 此時為路徑問題,解決方法為

Vue專案打包,靜態資源路徑出錯

一,css、js路徑出錯 1.1 特徵: 這種情況表現為頁面顯示是空白的! 1.2 解決方案 進入config ==> index.js 檔案 二,圖片路徑出錯 2.1 特徵: 本地測試沒問題,但是打包之後,路徑就亂了

vue專案打包資源相對引用路徑的和背景圖片路徑問題

vue專案中若要使用相對路徑來獲得相應靜態資源, 在一般專案 build 之後都會生成一個 index.htm 檔案和 一個 static 資料夾,而 static 這個資料夾需要被放置在根目錄下, 1.需要找到config --- index.js(webpack 是依據index.js 來自動生成檔案

vue專案打包文件過大怎麼辦,如何優化載入速度

路由懶載入 const Home = () => import('./views/Home.vue'); const MyInfo = () => import('./views/MyInfo.vue'); 在.babelrc中 "plugins": ["@babe

vue專案打包路由檢視router-view 不顯示

早段時間 ,用腳手架vue-cli 搭建的專案,build後放於伺服器上,發現其他資源全部變成靜態載入成功,但路由檢視為空, Vue.use(VueRouter) const router = new VueRouter({ mode: 'history',

vue專案打包上線時的配置操作 vue的圖片路徑,和背景圖片路徑打包錯誤解決

vue的圖片路徑,和背景圖片路徑打包後錯誤解決 2017-12-11 16:00 by muamaker, 7037 閱讀, 0 評論, 收藏, 編輯 最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vue

關於vue-cli打包,index顯示空白解決方法

1.修改打包時,檔案引用路徑在config檔案加下index.js檔案中,找到 build 中的  assetsPublicPath 將 assetsPublicPath: '/' 修改為 assetsPublicPath: './'  即新增一個點2.註釋相關列印提示(可選

maven無法載入本地jar包以及maven專案打包本地jar包沒有打進專案的問題解決辦法

1、首先設定依賴項,這樣maven就會把該路徑下的jar包匯入專案引用 <dependency> <groupId>DPSDK-Manager</groupId&g

vue.js - 解決vue-cli打包自動壓縮代碼

lena 搜索 .com clas 查看源碼 body 我們 pan hub 當我們用vue腳手架做完項目後,npm run build打包之後, 有沒有查看源碼,全是壓縮好的。但是我就不想讓它壓縮,該怎麽辦呢? 困惑了幾天,查了各種資料。終於終於... 來,上幹貨: 首先

VMware異常關閉虛擬機器無法開啟問題解決辦法

問題描述:今天在刪除虛擬機器快照的時候虛擬機器卡死了,於是簡單粗暴的開啟工作管理員結束了虛擬機器程序,再開啟虛擬機器後彈出提示框:“提示: 該虛擬機器似乎正在使用中,請按“獲取所有權(T)”按鈕獲取他的所有權,否則按取消”。但點選“獲取所有權”按鈕後,虛擬機器依舊打不開。 解決辦法:找到

vue-cli 打包背景圖出不來解決方法

vue-cli用npm run build打包之後,開啟index.html頁面,背景沒有加載出來解決辦法: 修改build/utils.js檔案裡面的ExtractTextPlugin,新增:publicPath: ‘…/…/’, 具體程式碼如下: if (options.extrac

vue+webpack專案打包背景圖片載入不出來

在做VUE +的WebPack腳手架專案打包完成後,在IIS伺服器上執行發現專案中的背景圖片載入不出來檢查專案程式碼發現是因為CSS檔案中,背景圖片引用的路徑問題;後來通過修改配置檔案,問題終於解決了,解決方法如下: 1.修改資源路徑 在VUE +的WebPack專案中,專案打包後的CSS和

vue webpack打包圖片路徑錯誤的解決方法

專案用run dev build 打包後,發現很多圖片都不顯示,在本地是沒有問題的啊!找原因發現通過webpack+vuecli預設打包的css、js等資源,路徑都是絕對的。 9E3E9C06-4873-4D1B-A5B3-35C71889249E.png 因為我們的圖片路徑都是經歷過

Vue專案打包時背景圖片資源路徑錯誤的解決方案

使用專案構建工具webpack或者vue-cli時,打包好的專案放伺服器上背景圖片都顯示不出來,控制檯提示資源404 not found,解決辦法如下: 在build檔案目錄下找到utils.js檔案 找到如下程式碼,新增一行程式碼:publicPath: '../../'即可