vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯解決
更新時間：2022年04月06日 16:23:26 作者：小碼Climber
這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli3.0修改打包后的文件地址和文件名
問題描述
最近開發(fā)一個web端vue項目時使用了vue-cli3.0搭建項目目錄，開發(fā)過程中一切順利，沒有遇到什么問題，開發(fā)完畢打包上線時出現了問題，打包后的文件默認在dist目錄下，打開index.html時發(fā)現不能運行，報錯如下：
現在有兩個問題
- 我想修改打包后的文件夾名稱；
- 上述報錯問題的解決；
網上查詢一番，發(fā)現大家都說修改config/index.js文件的配置。問題是該項目是用cli3.0搭建的，壓根就沒有config文件夾···
修改文件名
經過查詢，原來3.0搭建的項目已經取消了config文件夾，所有配置都是在最外層的vue.config.js文件中進行配置，如下圖：
修改文件名，只需要設置其中的outputDir選項即可：
module.exports = {
outputDir:"myProject" //打包后的項目目錄名稱
}
報錯解決
報錯問題網上很多都是在config/index.js修改build的路徑，而vue-cli3.0的vue.config.js不能直接寫build對象，另一種說法是修改其中的baseUrl，當你運行時會提示baseUrl已經廢棄，請用publicPath代替。
找到問題了就簡單了，直接修改publicPath即可：
module.exports = {
publicPath:"./" //基礎路徑
}
再次npm run build ,生成了自己想要的文件目錄名稱，其中的index.html也能夠正常打開；
vue文件夾名稱修改導致錯誤
一般這種情況是你把原來的文件夾名稱修改了，所以重新改回來就可以了
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue清除地址欄路由參數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇Vue刷新修改頁面中數據的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue路由跳轉后刷新指定頁面的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在項目中經常有需要將列表的高度設置成剩余可視區(qū)域的高度,本文主要來和大家介紹一下如何通過指令和css變量的方式快速設置列表高度,希望對大家有所幫助2024-03-03
這篇文章主要介紹了vue init失敗的簡單解決方法-終極版,需要的朋友可以參考下2017-12-12
近期在做ve3的項目時因為功能需要,需要獲取當前路由的地址,下面這篇文章主要給大家介紹了關于vue3獲取當前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源，這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下2022-08-08