vue項目npm?run?build打包dist文件及打包后空白解決辦法
更新時間：2023年10月20日 15:36:08 作者：穎兒?＾▽＾?
npm run build 這個命令會執(zhí)行Vue CLI中預定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下
前言
要想將vue的移動端項目打包成手機的app軟件apk格式，首先要將項目打包出dist文件。
步驟：
一、配置 :
（一定要配置）
情況一：在vue.config.js（或者config/index.js ）中添加
module.exports = defineConfig({
publicPath: "./",
outputDir: "dist",
assetsDir:"static",
})npm run build 打包前一定要配置publicPath: "./"，否則白屏，每次改動代碼重新打包
如果兩個文件都沒有，可在與src文件同級目錄新建vue.config.js，里面添加以上內(nèi)容
情況二：Vite打包
在vite.config.js文件添加base:'./'，如下，
base:'./'
二、打包
npm run build
檢驗是否成功
npm run build之后會生成dist文件，進入index.html,運行文件，出現(xiàn)內(nèi)容則運行成功
若空白查看一下配置，可能是配置有錯誤，（本人用的情況一配置空白，換成了情況二的配置，成功解決?。。?/p>
總結
到此這篇關于vue項目npm run build打包dist文件及打包后空白解決辦法的文章就介紹到這了,更多相關vue打包dist文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue2.x 使用 EventBus 進行組件通信，而 Vue3.x 推薦使用 mitt.js。本文就介紹一下mitt.js的具體使用方法，感興趣的可以了解一下2021-06-06
這篇文章主要給大家分享介紹了7個適用于Vue?3的高顏值UI組件庫,合理利用,又或者學習借鑒都是不錯的選擇,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue倉庫的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了VUE簡單的定時器實時刷新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Vue雙向數(shù)據(jù)綁定失效的常見場景和解決方案
在 Vue 2 和 Vue 3 中,雙向數(shù)據(jù)綁定（主要通過?v-model?實現(xiàn)）可能會在一些特定場景下失效,這些情況通常與 Vue 的響應式系統(tǒng)限制或不正確的用法有關,以下是兩者的主要失效場景和解決辦法,需要的朋友可以參考下2025-09-09
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)手機橫屏功能,需要的小伙伴可以參考一下2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue.js 2.0從基礎到組件的相關資料，文中介紹的非常詳細，對大家學習或者使用vue.js具有一定的參考價值，需要的朋友可以參考學習，下面來一起看看吧。2017-04-04