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