快捷導(dǎo)航

vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄

更新時(shí)間：2020年09月02日 11:50:17 作者：王耀冰

這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1.項(xiàng)目根目錄下新建vue.config.js，進(jìn)行如下配置即可

module.exports={
 publicPath:'',
};

補(bǔ)充知識(shí)：Vue-CLI3.0更改打包配置

在實(shí)際項(xiàng)目開發(fā)中，我們一般會(huì)直接使用vue、vue-cli來(lái)搭建項(xiàng)目。vue框架的宗旨就是讓初學(xué)者輕松上手，所以，對(duì)于打包配置的一些東西，vue的腳手架已經(jīng)幫我們做好了完美的封裝，讓我們達(dá)到安裝既用的效果，也不用擔(dān)心太多不會(huì)做打包配置的問題。

在前期使用Vue-CLI2.0搭建項(xiàng)目時(shí)，我們可以在build目錄下，直接修改webpack配置項(xiàng)。

但在Vue-CLI3.0中已經(jīng)幫我們對(duì)webpack配置做了二次封裝，在使用3.0版本搭建項(xiàng)目時(shí)，我們并不需要去關(guān)心原生webpack的配置，只需要查看Vue-CLI3.0官方API即可。

vue-cli3.0中的打包配置

vue-cli3.0的安裝

npm install -g @vue/cli

使用vue-cli3.0搭建項(xiàng)目

vue create my-project

項(xiàng)目目錄如下

在創(chuàng)建好的項(xiàng)目中，并不存在webpack的配置文件。因?yàn)関ue框架里，不需要知道如何配置webpack, 只需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.config.js配置文件，通過(guò)vue-cli腳手架中的一些封裝好的簡(jiǎn)單配置來(lái)實(shí)現(xiàn)即可。

Vue腳手架工具的宗旨是讓用戶配置起來(lái)更簡(jiǎn)單，所以在Vue-CLI3.0沒有把webpack的一些配置項(xiàng)直接暴露給我們，而是在webpack的基礎(chǔ)上再次封裝了更簡(jiǎn)單的API，供我們使用。這樣即便我們不會(huì)用webpack, 也可以通過(guò)一些簡(jiǎn)單的配置，對(duì)腳手架的一些打包配置以及打包流程做一些變更。

執(zhí)行打包：npm run build

vue-cli腳手架默認(rèn)生成的打包目錄為dist目錄，如果我們想通過(guò)配置，改變打包生成的目錄名稱，可創(chuàng)建vue.config.js，通過(guò)outputDir來(lái)配置：

vue.config.js

module.exports = {
 outputDir: 'xiaochengzi' // 生成文件為xiaochengzi
}

再次打包：npm run build

vue-cli對(duì)webpack的output.path做了再次封裝，所以我們僅僅通過(guò)一個(gè)鍵值對(duì)outputDir: 'xiaochengzi'即可實(shí)現(xiàn)配置的更改。事實(shí)上，腳手架底層使用的還是：output.path

//vue-cli的api
outputDir: 'xiaochengzi'

//底層會(huì)通過(guò)webpack的配置項(xiàng)output.path實(shí)現(xiàn)
output: {
 path: path.resolve(__dirname, 'xiaochengzi')
}

以上只是舉個(gè)例子，更多vue-cli配置需求請(qǐng)參考官方文檔：Vue-CLI(查看官方詳解)

特殊需求

項(xiàng)目中如果有特殊配置需求，Vue-CLI官方提供的配置API里無(wú)法實(shí)現(xiàn)的話，我們也可以通過(guò)官方預(yù)留的configureWebpack來(lái)對(duì)原生的webpack進(jìn)行配置。

舉個(gè)小栗子：

在剛剛創(chuàng)建好的項(xiàng)目根目錄下新建static目錄，在static目錄下新增index.json文件：

通過(guò)打包運(yùn)行，我們想在瀏覽器通過(guò)訪問localhost:8080/index.json直接可以訪問到我們的json對(duì)象，不做配置的情況下，在瀏覽器訪問顯示如下：（還是初始頁(yè)面）

通過(guò)configureWebpack來(lái)對(duì)原生的webpack進(jìn)行配置：

const path = require('path');
module.exports = {
 configureWebpack: { // 對(duì)原生的webpack進(jìn)行配置 
 devServer: {
  contentBase: [path.resolve(__dirname, 'static')]
 }
 }
}

此配置標(biāo)識(shí)：當(dāng)訪問指定文件時(shí)，webpack-dev-server服務(wù)不光回去打包后的dist目錄下去查找文件，還會(huì)去static目錄下查找文件，找到匹配文件后，既返回匹配文件內(nèi)容。

再次打包運(yùn)行：npm run serve

瀏覽器訪問localhost:8080/index.json，顯示結(jié)果如下：

總結(jié)：Vue-CLI3.0不僅幫我們做了webpack的大量API的封裝，還幫我們預(yù)留了不常用需求的配置接口，方便我們項(xiàng)目開發(fā)，減輕我們的學(xué)習(xí)難度（就算對(duì)webpack不太懂的情況下，也能通過(guò)閱讀Vue-CLI官方文檔，來(lái)輕松上手做webpack的配置）。

以上這篇vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: