序言

Vue 腳手架是 Vue 作為一個前端開發(fā)項(xiàng)目的最核心點(diǎn)，將JavaScript、CSS、HTML這幾種前端自動整合，極大的簡化了前端開發(fā)工作。

沒有 Vue 腳手架，就沒有 Vue ，這是一定的，Java 語言和C語言都需要編譯，那么你可以將 Vue 腳手架看作是偽編譯器吧，或者是偽解釋器，當(dāng)然偽解釋器比較準(zhǔn)確點(diǎn)。

個人理解

在筆者看來，Vue 項(xiàng)目有時會出現(xiàn)兩個問題，一個是舊版本的 Vue 腳手架，一個是新版本的Vue 腳手架，筆者不太清楚哪些 Vue腳手架版本是算是舊版，還是新版，但是很明確的知道，部分Vue 項(xiàng)目的的確確會出現(xiàn)一種情況，那就是沒有 public 目錄的情況，當(dāng)遇到這種情況，的確會出現(xiàn)額外的問題需要解決，問題在于 index.html 文件的放置問題，比如新版 Vue 腳手架正常情況下，index.html 文件都會在 Vue 項(xiàng)目創(chuàng)建時，便已被放置在 public 目錄下，但是舊版 Vue 腳手架，卻會直接將 index.html文件放置在 Vue 項(xiàng)目的根目錄下，在我看來，有些不規(guī)范，對于強(qiáng)迫癥而言，的確有些不舒服。

筆者嘗試修改舊版 Vue 腳手架 index.html 路徑問題思路如下：

1. 修改 process.env.BASE_URL，但涉及源碼比較深入，不宜操作，舍棄

2. 關(guān)于開發(fā)環(huán)境和生產(chǎn)環(huán)境下的自定義 index.html 路徑問題，但是打包時容易出錯，無法正常打包，這一點(diǎn)看問題1 的報(bào)錯，有解決方法。（推薦）

下面是筆者在無 public 目錄情況下，遇到的 Vue 項(xiàng)目開發(fā)問題集錦。

如下問題出現(xiàn)的前提：Vue項(xiàng)目創(chuàng)建后，沒有 public 目錄的情況：

問題 1 新建 public 目錄，修改其打包路徑問題

（已解決，記錄一下解決過程）

開發(fā)環(huán)境index.html文件路徑配置

新建了 public 目錄，并將 index.html 目錄，移動到 public 目錄內(nèi)，并修改 webpack.dev.conf.js （開發(fā)環(huán)境配置文件）文件內(nèi)的 HtmlWebpackPlugin 配置，如下所示

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './public/index.html',
      inject: true
    }),

成功在本地開發(fā)環(huán)境運(yùn)行成功（cnpm run dev），并顯示在本地瀏覽器上，在webpack.prod.conf.js 文件（生產(chǎn)環(huán)境配置文件）內(nèi)設(shè)置了一樣的配置。

當(dāng)然筆者不保證是一樣的配置路徑，筆者這里的是相對路徑配置，所以如果你打包時，會出現(xiàn)如下報(bào)錯，那么仔細(xì)研究下，路徑問題，到底是'./public/index.html'還是 '../public/index.html'

報(bào)錯：

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'E:\VueProject\public\index.html' in 'E:\VueProject\testproject':
  Error: Can't resolve 'E:\VueProject\public\index.html' in 'E:\VueProject\testpriject'

問題2 favicon 圖標(biāo)的放置問題

如果有 public 目錄，那么正常情況下，我們都能將 favicon 圖標(biāo)放置在 public 目錄下，當(dāng)然這一點(diǎn)在 index.html 文件內(nèi)需要我們配置好 favicon 的路徑，如下：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

但是很遺憾，我們無法如此，會遇到報(bào)錯 Vue Template execution failed: ReferenceError: BASE_URL is not defined

當(dāng)然，我們也不用這么麻煩，只需要將 favicon.ico 的圖標(biāo)文件，放到 static 文件就行了，打包的時候，就不會出錯了，當(dāng)然，這里筆者的 index.html 配置如下所示：

<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>/static/favicon.ico">

不是所謂的

<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">

當(dāng)然，如果實(shí)在是強(qiáng)迫癥的，想要將其圖標(biāo)文件放到 public 目錄下，可以研究下 CopyWebpackPlugin 插件

該插件的作用在于，收集靜態(tài)文件到指定的打包路徑位置，所以應(yīng)該可以打包 public 目錄下的靜態(tài)文件。如下解決問題2 參考鏈接4 02-02模塊化作業(yè)

當(dāng)然，上面只是啟發(fā)，具體的實(shí)現(xiàn)是在 webpack.prod.conf.js 文件（生產(chǎn)環(huán)境配置文件），開發(fā)環(huán)境的配置也是如此（webpack.dev.conf.js）

1、生產(chǎn)環(huán)境打包配置 webpack.prod.conf.js ：

（注意看是 config.build.assetsSubDirectory）

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

筆者發(fā)現(xiàn)了一點(diǎn)不好的是，如果將 index.html 和 favicon.ico 文件放到 public 目錄內(nèi)，那么打包時，也會順便把 index.html 復(fù)制兩份，一份是在 Vue 打包的 dist 根目錄下的，一份是在 static 目錄內(nèi)，有些冗余不規(guī)范且麻煩，要手動刪除。

所以這里還需要配置一個忽略 index.html 的設(shè)置。如下：

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.build.assetsSubDirectory,
        ignore: ['index.html']
      }
    ])

2、開發(fā)環(huán)境 webpack.dev.conf.js 配置：

（注意看是 config.dev.assetsSubDirectory）

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.dev.assetsSubDirectory,
        ignore: ['index.html']
      }
    ])

關(guān)于自動清除上一次打包遺留的文件，我覺得不需要去專門安裝 CleanWebpackPlugin，打包時（cnpm run build 、cnpm run build:prod），Vue 腳手架會自動刪除上一次的打包文件，所以完全沒必要。

assetsPublicPath 按默認(rèn)的就好，默認(rèn)是 '/'

這里的 assetsPublicPath 配置關(guān)于 public 目錄完全沒有關(guān)聯(lián)的，關(guān)聯(lián)的是 URL前端的公共路徑，所以有點(diǎn)誤導(dǎo)人。

解決問題2 參考鏈接

1. Vue Template execution failed: ReferenceError: BASE_URL is not defined

2. Template execution failed ReferenceError BASE_URL is not defined

3. Template execution failed: ReferenceError: BASE_URL is not defined

4. 02-02模塊化作業(yè)

5. webpack入門（六）——html-webpack-plugin

6. vuecli3.0 htmlWebpackPlugin 報(bào) ReferenceError: BASE_URL is not defined 錯誤

7. vue-cli腳手架項(xiàng)目中public和src/assets的區(qū)別

8. Vue CLI 3 public 目錄沒用嗎

9. vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件

10. vue項(xiàng)目中的public、static及指定不編譯文件問題怎么解決

11. 我創(chuàng)建的項(xiàng)目里沒有public文件

12. vue項(xiàng)目打包需要修改的路徑問題

13. vue項(xiàng)目中引用public下面的文件

14. vue-cli2、vue-cli3腳手架詳細(xì)講解

對本問題2 無效的參考鏈接

1. vue項(xiàng)目設(shè)置瀏覽器icon圖標(biāo)

2. vue中添加favicon 圖標(biāo) （3種方法）

3. 大白話Vue之publicPath

4. vue項(xiàng)目中配置favicon圖標(biāo)

5. vue項(xiàng)目添加favicon的幾種方式文章來源地址http://www.zghlxwxcb.cn/news/detail-464620.html

到了這里，關(guān)于Vue 腳手架（打包工具）的理解 - 配置文件理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！