vue3無config文件夾打包后頁面空白問題及解決
vue3無config文件夾打包后頁面空白
項目場景
項目場景:vue文件打包之后頁面空白(全)
場景1:vue2有config文件夾
找到config文件夾下的index.js文件,將 assetsPublicPath: "/"改為assetsPublicPath: "./"
原理: 打包之后的index.html找不到相關的資源,默認/在同級查找,沒有找到,如果上面改完之后還是不行,請仔細檢查打包后的項目結構,修改這個assetsPublicPath

場景2:vue3無config文件夾
找到項目中的vue.config.js文件(如果沒有可以照著圖中的項目結構建一個),然后在里面添加
module.exports = {
publicPath: './', // 根域上下文目錄
outputDir: 'dist', // 構建輸出目錄,可不寫
assetsDir: 'assets', // 靜態(tài)資源目錄 (js, css, img, fonts),可不寫
};
就可以了,里面的路徑原理和場景1一樣,可自行按照實際項目需求修改

目錄結構沒有config文件夾
問題:
在頁面完成后,打包上線頁面出現(xiàn)白屏問題。百度到的,解決辦法是,改變config文件夾下,index.js中,build下的 assetsPublicPath:"/" => assetsPublicPath:"./"。隨后發(fā)現(xiàn)創(chuàng)建的是vue3的項目沒有config文件夾。
解決方案
在項目根目錄,創(chuàng)建 vue.config.js 文件,文件內容如下:
module.exports={
publicPath:"./"
}
解決!以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
詳解Vue返回值動態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動態(tài)生成表單及提交數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12
Vue使用Axios庫請求數(shù)據(jù)時跨域問題的解決方法詳解
在 VUE 項目開發(fā)時,遇到個問題,正常設置使用 Axios 庫請求數(shù)據(jù)時,報錯提示跨域問題,那在生產(chǎn)壞境下,該去怎么解決呢?下面小編就來和大家詳細講講2024-01-01

