解決創(chuàng)建vue項(xiàng)目后沒(méi)有vue.config.js文件的問(wèn)題
?? webpack.config.js文件沒(méi)有的原因
Vue 項(xiàng)目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。
vue-cli3 之后創(chuàng)建的時(shí)候并不會(huì)自動(dòng)創(chuàng)建 vue.config.js,因?yàn)檫@個(gè)是個(gè)可選項(xiàng),所以一般都是需要修改 webpack 的時(shí)候才會(huì)自己創(chuàng)建一個(gè) vue.config.js。
vue-cil3之后創(chuàng)建項(xiàng)目后的目錄結(jié)構(gòu)如下:
├── README.md # 說(shuō)明 |-- dist # 打包后文件夾 ├── babel.config.js # babel語(yǔ)法編譯 ├── package-lock.json ├── public # 靜態(tài)文件夾,這類資源將會(huì)直接被拷貝,而不會(huì)經(jīng)過(guò) webpack 的處理。 │ ├── favicon.ico │ └── index.html #入口頁(yè)面 └── src # 源碼目錄 ├── App.vue - 頁(yè)面 ├── assets - 靜態(tài)目錄,這類引用會(huì)被 webpack 處理。 │ └── logo.png ├── components 組件 │ └── HelloWorld.vue └── main.js # 入口文件,加載公共組件 │—— vue.config.js # 配置文件,需自行配置 │—— .gitignore # git忽略上傳的文件格式 │—— babel.config.js # babel語(yǔ)法編譯 │—— package.json # 項(xiàng)目基本信息 │—— .env # 環(huán)境變量和模式,需自行配置 │—— .eslintrc.js # ES-lint校驗(yàn)
開(kāi)發(fā)者一般不需要再去知道 webpack 做了什么,所以沒(méi)有暴露 webpack 的配置文件,但你依然可以創(chuàng)建 vue.config.js 去修改默認(rèn)的 webpack。
Vue-cli3+ 和 Vue-cli2 的最大區(qū)別:在于內(nèi)置了很多配置,沒(méi)有 build 文件夾和 config 的配置。但是在開(kāi)發(fā)中,避免不了的還是需要個(gè)性化的配置,這里講一下 vue.config.js 的配置。
?? 手動(dòng)創(chuàng)建一個(gè) vue.config.js
module.exports = { publicPath: './', // 基本路徑 outputDir: 'dist', // 構(gòu)建時(shí)的輸出目錄 assetsDir: 'static', // 放置靜態(tài)資源的目錄 indexPath: 'index.html', // html 的輸出路徑 filenameHashing: true, // 文件名哈希值 lintOnSave: false, // 是否在保存的時(shí)候使用 `eslint-loader` 進(jìn)行檢查。 // 組件是如何被渲染到頁(yè)面中的? (ast:抽象語(yǔ)法樹(shù);vDom:虛擬DOM) // template ---> ast ---> render ---> vDom ---> 真實(shí)的Dom ---> 頁(yè)面 // runtime-only:將template在打包的時(shí)候,就已經(jīng)編譯為render函數(shù) // runtime-compiler:在運(yùn)行的時(shí)候才去編譯template runtimeCompiler: false, transpileDependencies: [], // babel-loader 默認(rèn)會(huì)跳過(guò) node_modules 依賴。 productionSourceMap: false, // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map //調(diào)整內(nèi)部的 webpack 配置 configureWebpack: () => { }, chainWebpack: () => { }, // 配置 webpack-dev-server 行為。 devServer: { open: true, // 編譯后默認(rèn)打開(kāi)瀏覽器 host: '0.0.0.0', // 域名 port: 8080, // 端口 https: false, // 是否https // 顯示警告和錯(cuò)誤 overlay: { warnings: false, errors: true }, } }
?? 沒(méi)有配置vue.config.js之前,打包后的文件如下
注意:此時(shí)直接打開(kāi)index.html文件可能頁(yè)面的圖片沒(méi)有顯示
?? 配置后
注意:此時(shí)dist文件底下會(huì)創(chuàng)建一個(gè)static文件夾(因?yàn)関ue.config.js中配置了assetsDir屬性),用來(lái)存放靜態(tài)文件,如css、js、font、img,
此時(shí),打開(kāi)index.html文件頁(yè)面圖片可以正常顯示
到此這篇關(guān)于解決創(chuàng)建vue項(xiàng)目后沒(méi)有vue.config.js文件的問(wèn)題的文章就介紹到這了,更多相關(guān)vue項(xiàng)目沒(méi)有vue.config.js文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11Vue開(kāi)發(fā)中遇到的跨域問(wèn)題及解決方法
在本篇文章里小編給大家整理的是關(guān)于Vue開(kāi)發(fā)中遇到的跨域問(wèn)題及解決方法,需要的朋友們可以學(xué)習(xí)下。2020-02-02el-table-column 內(nèi)容不自動(dòng)換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動(dòng)換行的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue3+ts項(xiàng)目之安裝eslint、prettier和sass的詳細(xì)過(guò)程
這篇文章主要介紹了vue3+ts項(xiàng)目02-安裝eslint、prettier和sass的詳細(xì)過(guò)程,在本文講解中需要注意執(zhí)行yarn format會(huì)自動(dòng)格式化css、js、html、json還有markdown代碼,需要的朋友可以參考下2023-10-10