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)目中就會(huì)多了一個(gè)文件夾dist，這就是我們打包過后的項(xiàng)目。
二、打包完成后配置會(huì)自動(dò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,
/* 自動(dòng)打開瀏覽器 */
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í)候，打包出來的文件也會(huì)是一片空白的情況，
解決：在 router.js 中將 mode: history注釋掉
到此這篇關(guān)于Vue打包后頁面出現(xiàn)空白解決辦法的文章就介紹到這了,更多相關(guān)Vue打包頁面出現(xiàn)空白內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(1)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue兩個(gè)組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
在vue中axios設(shè)置timeout超時(shí)的操作
這篇文章主要介紹了在vue中axios設(shè)置timeout超時(shí)的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時(shí),多多少少會(huì)遇到獲取當(dāng)前位置的詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue 計(jì)算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過一些邏輯計(jì)算后才能得出來，那么我們可以把這類屬性變成計(jì)算屬性，下面我們來看看具體實(shí)例,需要的朋友可以參考一下2021-10-10
前后端分離進(jìn)行項(xiàng)目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10