Vue打包后頁面出現(xiàn)空白解決辦法
一、 vue-cli創(chuàng)建項打包后打開頁面為空白的問題解決
命令行輸入:npm run build
打包出來后項目中就會多了一個文件夾dist,這就是我們打包過后的項目。
二、打包完成后配置會自動生成vue.config.js文件,這個文件非常重要值得你收藏
配置如下:
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)包時生成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": {
/* 目標代理服務器地址 */
target: "http://m260048y71.zicp.vip", //
// target: "http://192.168.1.102:8888", //
/* 允許跨域 */
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
第三個問題:router-view中的內(nèi)容顯示不出來。路由history模式
這個坑是當你使用了路由之后,在沒有后端配合的情況下就手賤打開路由history模式的時候,打包出來的文件也會是一片空白的情況,
解決:在 router.js 中將 mode: history注釋掉
到此這篇關于Vue打包后頁面出現(xiàn)空白解決辦法的文章就介紹到這了,更多相關Vue打包頁面出現(xiàn)空白內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue element-ui實現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現(xiàn)el-table表格多選以及回顯方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(1)
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04
VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當前位置的詳細信息,下面這篇文章主要給大家介紹了關于VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)的相關資料,需要的朋友可以參考下2023-04-04
Vue3計算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計算屬性適用于對已有的數(shù)據(jù)進行計算,派生新的數(shù)據(jù),并在模板中使用;而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場景,選擇適合的機制這篇文章主要介紹了Vue3計算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02

