好長(zhǎng)一段時(shí)間沒有關(guān)注vue腳手架了，昨天因?yàn)樾枰獋€(gè)后臺(tái)模板，用腳手架 搞了一下，竟然發(fā)現(xiàn)指令不能用了，看官方文檔已經(jīng)升級(jí)3.0，也是試的玩了一下， 大致寫寫怎么玩的！

• 1
• 2
• 3
• 4

1.先全局安裝vue-cli3.0?

檢測(cè)安裝： vue -V

• 1
• 2

2.創(chuàng)建項(xiàng)目（這個(gè)就跟react創(chuàng)建腳手架項(xiàng)目比較像了）

?

這里如果你是第一次用3.0版本的話，是沒有前兩個(gè)的，而只有最后兩個(gè)，這里是 讓你選的，第一個(gè)是默認(rèn)配置，一般選第二個(gè)，自己配置，這里選擇最后一個(gè)

• 1
• 2

當(dāng)你選擇后會(huì)出現(xiàn)上面圖上的東西，這里你可以自由選擇用哪些配置，按上下鍵 選擇哪一個(gè)，按空格鍵確定，所有的都選擇好后，按enter鍵進(jìn)行下一步，這里 演示，我隨便選了幾個(gè)

• 1
• 2
• 3

下一步之后問詢問你安裝哪一種 CSS 預(yù)處理語(yǔ)言，你隨意選擇，我是一直用的less

• 1

上面這個(gè)是問你選擇哪個(gè)自動(dòng)化代碼格式化檢測(cè)，配合vscode編輯器的 Prettier - Code formatter插件，我選的隨后一個(gè)

• 1
• 2

這里第一個(gè)選項(xiàng)是問你是否保存剛才的配置，選擇確定后你下次再創(chuàng)建新項(xiàng)目 就有你以前選擇的配置了，不用重新再配置一遍了

• 1
• 2

上邊這倆意思問你像，babel,postcss,eslint這些配置文件放哪？ 第一個(gè)是：放獨(dú)立文件放置 第二個(gè)是：放package.json里 這里推薦放單獨(dú)配置文件，選第一個(gè)

• 1
• 2
• 3
• 4

上邊倒數(shù)第二行問你是否將以上這些將此保存為未來(lái)項(xiàng)目的預(yù)配置嗎？ 最后一個(gè)是描述項(xiàng)目，你隨意選擇，點(diǎn)擊確定就開始下載模板了

• 1
• 2

下載好后，項(xiàng)目結(jié)構(gòu)就變成這樣了，相比2.0精簡(jiǎn)了很多， 然后cd 進(jìn)項(xiàng)目，啟動(dòng)服務(wù)npm run serve, 這里發(fā)現(xiàn)少了vue.config.js文件，那以前的配置怎么搞？

• 1
• 2
• 3

?
上邊是2.0的目錄結(jié)構(gòu)?
?
這個(gè)是3.0的目錄結(jié)構(gòu),比2.0少了好多，這些都放在@vue/文件下了，你可以打開看看

下邊你要做的就是在根目錄下新建一個(gè)vue.config.js文件，進(jìn)行你的配置，具體配置看文檔，我在最下邊簡(jiǎn)單羅列了幾個(gè)

• 1

當(dāng)然如果你不想用3.0的話，還是可以繼續(xù)使用2.0的,官方文檔是這樣說(shuō)的：

• 1

這里簡(jiǎn)單羅列vue,config.js一些配置項(xiàng) 當(dāng)然你配置接口地址時(shí)還是通過(guò)下邊這個(gè)來(lái)獲取 在main.js里或者單獨(dú)配置接口地址的文件里： var env = process.env.NODE_ENV console.log(env)

• 1
• 2
• 3
• 4
• 5

// vue.config.js 配置說(shuō)明 // 這里只列一部分，具體配置慘考文檔啊 module.exports = { // baseUrl type:{string} default:'/' // 將部署應(yīng)用程序的基本URL // 將部署應(yīng)用程序的基本URL。 // 默認(rèn)情況下，Vue CLI假設(shè)您的應(yīng)用程序?qū)⒉渴鹪谟虻母夸浵隆? // https://www.my-app.com/。如果應(yīng)用程序部署在子路徑上，則需要使用此選項(xiàng)指定子路徑。例如，如果您的應(yīng)用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'. baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/', // outputDir: 在npm run build時(shí) 生成文件的目錄 type:string, default:'dist' // outputDir: 'dist', // pages:{ type:Object,Default:undfind } /* 構(gòu)建多頁(yè)面模式的應(yīng)用程序.每個(gè)“頁(yè)面”都應(yīng)該有一個(gè)相應(yīng)的JavaScript條目文件。該值應(yīng)該是一 個(gè)對(duì)象，其中鍵是條目的名稱，而該值要么是指定其條目、模板和文件名的對(duì)象，要么是指定其條目 的字符串， 注意：請(qǐng)保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動(dòng)服務(wù)會(huì)報(bào)錯(cuò)的 */ // pages: { // index: { // entry for the page // entry: 'src/index/main.js', // the source template // template: 'public/index.html', // output as dist/index.html // filename: 'index.html' // }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. // subpage: 'src/subpage/main.js' // }, // lintOnSave：{ type:Boolean default:true } 問你是否使用eslint lintOnSave: true, // productionSourceMap：{ type:Bollean,default:true } 生產(chǎn)源映射 // 如果您不需要生產(chǎn)時(shí)的源映射，那么將此設(shè)置為false可以加速生產(chǎn)構(gòu)建 productionSourceMap: false, // devServer:{type:Object} 3個(gè)屬性host,port,https // 它支持webPack-dev-server的所有選項(xiàng) devServer: { port: 8085, // 端口號(hào) host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自動(dòng)啟動(dòng)瀏覽器 // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } }, // 配置多個(gè)代理 } }

轉(zhuǎn)載于:https://www.cnblogs.com/vsmart/p/10399919.html

總結(jié)

以上是生活随笔為你收集整理的vue-cli3.0使用及配置（部分）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。