亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決創(chuàng)建vue項(xiàng)目后沒(méi)有vue.config.js文件的問(wèn)題

 更新時(shí)間:2023年07月27日 09:42:32   作者:儒雅的烤地瓜  
這篇文章給大家主要介紹如何解決創(chuàng)建vue項(xiàng)目后沒(méi)有webpack.config.js(vue.config.js)文件,文中有詳細(xì)的解決方法,感興趣的朋友可以參考閱讀下

?? 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)文章

最新評(píng)論