首頁 web前端 js教程 利用vue+webpack如何解決打包檔案 404 頁面空白問題

利用vue+webpack如何解決打包檔案 404 頁面空白問題

Jun 02, 2018 pm 03:14 PM
web 打包

下面我就為大家分享一篇vue webpack 打包檔案 404 頁面空白的解決方法,具有很好的參考價值,希望對大家有幫助。

最近用vue-cli vue-router webpack建立項目,其中的遇到的三個問題,整理如下:

vue-cli webpack 建立的項目,cnpm run build 打包項目之後,需要放在http伺服器上才可以運行,

例如:nginx

vue單頁的啟動頁面是index.html,路由的路徑實際上是不存在的,所以會出現刷新頁面404的問題,需要設定所有找不到的路徑直接對應到index.html

1 刷新頁面404

設定啟動檔的index頁面的路徑root: D:/workPlace/mex-adx-web/mex-adx-web/dist

2 二級頁面刷新報錯:

打包的項目靜態資源的路徑需要設定為絕對路徑。如果是相對路徑會出錯

config-index.js

#3 :專案執行沒有問題,但打包之後執行文件報錯誤

Unexpected token:`。 。 。

需要單獨設定babel,將設定放到檔案.babelrc中:

#上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

iview table高度動態設定方法

#Angular4整合ng2-file-upload的上傳元件

#nodejs acl的使用者權限管理詳解

#

以上是利用vue+webpack如何解決打包檔案 404 頁面空白問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
分享PyCharm專案打包的簡易方法 分享PyCharm專案打包的簡易方法 Dec 30, 2023 am 09:34 AM

簡單易懂的PyCharm專案打包方法分享隨著Python的流行,越來越多的開發者使用PyCharm作為Python開發的主要工具。 PyCharm是功能強大的整合開發環境,它提供了許多方便的功能來幫助我們提高開發效率。其中一個重要的功能就是專案的打包。本文將介紹如何在PyCharm中簡單易懂地打包項目,並提供具體的程式碼範例。為什麼要打包專案?在Python開發

web標準是什麼東西 web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南,它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化,透過遵循這些標準,可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互,提供更好的使用者體驗和開發效率。

Python 應用的獨立宣言:PyInstaller 的自由之路 Python 應用的獨立宣言:PyInstaller 的自由之路 Feb 20, 2024 am 09:27 AM

PyInstaller:Python應用的獨立化PyInstaller是一款開源的python打包工具,它將Python應用程式及其相依性打包為一個獨立的執行檔。這個過程消除了對Python解釋器的依賴,同時允許應用程式在各種平台上運行,包括windows、MacOS和linux。打包過程PyInstaller的打包過程相對簡單,涉及以下步驟:pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile選項建立一個單一

如何從駕駛艙Web使用者介面啟用管理訪問 如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中,我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題:駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式:受限訪問:這是駕駛艙的默認訪問模式。在這種存取模式下,您無法從駕駛艙Web用戶

web是什麼意思 web是什麼意思 Jan 09, 2024 pm 04:50 PM

web是全球廣域網,也稱為萬維網,是互聯網的一種應用形式。 Web 是一種基於超文本和超媒體的資訊系統,它允許使用者透過超連結在不同的網頁之間跳轉,從而瀏覽和獲取資訊。 Web 的基礎是互聯網,它使用統一、標準化的協定和語言,使得不同電腦之間能夠進行資料交換和資訊共享。

Python 程式碼變身獨立應用:PyInstaller 的煉金術 Python 程式碼變身獨立應用:PyInstaller 的煉金術 Feb 19, 2024 pm 01:27 PM

PyInstaller是一個開源程式庫,允許開發者將python程式碼編譯為平台無關的自包含可執行檔(.exe或.app)。它透過將Python程式碼、依賴項和支援檔案打包在一起來實現這一目標,從而創建獨立應用程序,無需安裝Python解釋器即可運行。 PyInstaller的優點在於它消除了對Python環境的依賴性,使應用程式可以輕鬆分發和部署給最終用戶。它還提供了建構器模式,使用戶可以自訂應用程式的設定、圖示、資源檔案和環境變數。使用PyInstaller打包Python程式碼安裝PyInstal

Python 應用的終極進化:PyInstaller 的破繭成蝶 Python 應用的終極進化:PyInstaller 的破繭成蝶 Feb 19, 2024 pm 03:27 PM

PyInstaller是一個革命性的工具,它賦予python應用程式超越其原始腳本形態的能力。透過將Python程式碼編譯成獨立的可執行文件,PyInstaller解鎖了程式碼分發、部署和維護的新境界。從單一腳本到強大應用程式以往,Python腳本只存在於特定的Python環境中。分發這樣的腳本需要使用者安裝Python和必要的函式庫,這是一個費時且繁瑣的過程。 PyInstaller引入了打包的概念,將Python程式碼與所有必要的依賴項組合成一個單獨的執行檔。代碼打包的藝術PyInstaller的工

VSCode功能詳解:它如何幫助你提高工作效率? VSCode功能詳解:它如何幫助你提高工作效率? Mar 25, 2024 pm 05:27 PM

VSCode功能詳解:它如何幫助你提高工作效率?隨著軟體開發產業的不斷發展,開發人員們追求工作效率和程式碼品質成為了他們工作中的重要目標。在這個過程中,程式碼編輯器的選擇成為了一項關鍵的決策。而在眾多的編輯器中,VisualStudioCode(簡稱VSCode)憑藉其強大的功能和靈活的擴展性受到了廣大開發者的喜愛。本文將詳細介紹VSCode的一些功能,探討

See all articles