Vue打包后頁面出現(xiàn)空白解決辦法
更新時(shí)間：2021年08月03日 11:50:08 作者：張清悠
本文主要介紹了Vue打包后頁面出現(xiàn)空白解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、 vue-cli創(chuàng)建項(xiàng)打包后打開頁面為空白的問題解決
命令行輸入：npm run build
打包出來后項(xiàng)目中就會多了一個(gè)文件夾dist，這就是我們打包過后的項(xiàng)目。
二、打包完成后配置會自動生成vue.config.js文件，這個(gè)文件非常重要值得你收藏
配置如下：
const path = require("path");
const resolve = function(dir) {
return path.join(__dirname, dir);
};
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
outputDir: "dist",
assetsDir: "static",
lintOnSave: true, // 是否開啟eslint保存檢測
productionSourceMap: false, // 是否在構(gòu)建生產(chǎn)包時(shí)生成sourcdeMap
chainWebpack: config => {
config.resolve.alias
.set("@", resolve("src"))
.set("@v", resolve("src/views"))
.set("@c", resolve("src/components"))
.set("@u", resolve("src/utils"))
.set("@s", resolve("src/service")); /* 別名配置 */
config.optimization.runtimeChunk("single");
},
devServer: {
// host: "localhost",
/* 本地ip地址 */
//host: "192.168.1.107",
host: "0.0.0.0", //局域網(wǎng)和本地訪問
port: "8080",
hot: true,
/* 自動打開瀏覽器 */
open: false,
overlay: {
warning: false,
error: true
},
/* 跨域代理 */
proxy: {
"/api": {
/* 目標(biāo)代理服務(wù)器地址 */
target: "http://m260048y71.zicp.vip", //
// target: "http://192.168.1.102:8888", //
/* 允許跨域 */
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
第三個(gè)問題：router-view中的內(nèi)容顯示不出來。路由history模式
這個(gè)坑是當(dāng)你使用了路由之后，在沒有后端配合的情況下就手賤打開路由history模式的時(shí)候，打包出來的文件也會是一片空白的情況，
解決：在 router.js 中將 mode: history注釋掉
到此這篇關(guān)于Vue打包后頁面出現(xiàn)空白解決辦法的文章就介紹到這了,更多相關(guān)Vue打包頁面出現(xiàn)空白內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯(cuò)誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue中配置scss全局變量的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
深入探索Vue中樣式綁定的七種實(shí)現(xiàn)方法
在?Vue.js?開發(fā)中,合理地控制元素的樣式對于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說明每種方法的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web在線聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
深入探討Vue3實(shí)現(xiàn)多數(shù)據(jù)變化監(jiān)聽的方式
隨著 Vue 3 的發(fā)布,框架帶來了更多的新特性和增強(qiáng),其中之一就是 watch 函數(shù)的升級,這一改進(jìn)使得多個(gè)數(shù)據(jù)的變化偵聽更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實(shí)現(xiàn)對多個(gè)數(shù)據(jù)變化的監(jiān)聽2023-08-08
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見使用的就是Vue配套的Vue Router庫，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下2023-10-10
vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08