vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯解決
更新時間：2022年04月06日 16:23:26 作者：小碼Climber
這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli3.0修改打包后的文件地址和文件名
問題描述
最近開發(fā)一個web端vue項目時使用了vue-cli3.0搭建項目目錄，開發(fā)過程中一切順利，沒有遇到什么問題，開發(fā)完畢打包上線時出現(xiàn)了問題，打包后的文件默認在dist目錄下，打開index.html時發(fā)現(xiàn)不能運行，報錯如下：
現(xiàn)在有兩個問題
- 我想修改打包后的文件夾名稱；
- 上述報錯問題的解決；
網(wǎng)上查詢一番，發(fā)現(xiàn)大家都說修改config/index.js文件的配置。問題是該項目是用cli3.0搭建的，壓根就沒有config文件夾···
修改文件名
經(jīng)過查詢，原來3.0搭建的項目已經(jīng)取消了config文件夾，所有配置都是在最外層的vue.config.js文件中進行配置，如下圖：
修改文件名，只需要設(shè)置其中的outputDir選項即可：
module.exports = {
outputDir:"myProject" //打包后的項目目錄名稱
}
報錯解決
報錯問題網(wǎng)上很多都是在config/index.js修改build的路徑，而vue-cli3.0的vue.config.js不能直接寫build對象，另一種說法是修改其中的baseUrl，當(dāng)你運行時會提示baseUrl已經(jīng)廢棄，請用publicPath代替。
找到問題了就簡單了，直接修改publicPath即可：
module.exports = {
publicPath:"./" //基礎(chǔ)路徑
}
再次npm run build ,生成了自己想要的文件目錄名稱，其中的index.html也能夠正常打開；
vue文件夾名稱修改導(dǎo)致錯誤
一般這種情況是你把原來的文件夾名稱修改了，所以重新改回來就可以了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue+echart實現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
下面小編就為大家?guī)硪黄獪\談mint-ui loadmore組件注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Babel是一個JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語法,以便能夠運行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue.js bootstrap前端實現(xiàn)分頁和排序
這篇文章主要為大家詳細介紹了Vue.js結(jié)合bootstrap前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue?Router?是?Vue?的官方路由,它與?Vue.js?核心深度集成,讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉,下面就跟隨小編一起學(xué)習(xí)一下vue-router的具體用法吧2023-12-12
這篇文章主要介紹了詳解Vue單元測試case寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)
本文以校驗兩次密碼的一致性應(yīng)用，給出兩個可變屬性值的字段之間的聯(lián)合校驗的典型解決方案，通過實例代碼給大家介紹Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)，需要的朋友一起看看吧2021-07-07
這篇文章主要介紹了vue使用計算屬性完成動態(tài)滑竿條制作，文章圍繞計vue算屬制作動態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
文章介紹了Vue項目部署步驟以及404錯誤的解決方案,部署步驟包括構(gòu)建項目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問域名,404錯誤通常是由于歷史模式問題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁面請求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況2025-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格過濾功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09