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