vue-cli3.0使用及部分配置詳解
好長一段時間沒有關(guān)注vue腳手架了,昨天因?yàn)樾枰獋€后臺模板,用腳手架
搞了一下,竟然發(fā)現(xiàn)指令不能用了,看官方文檔已經(jīng)升級3.0,也是試的玩了一下,
大致寫寫怎么玩的!
1.先全局安裝vue-cli3.0

檢測安裝:
vue -V

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

這里如果你是第一次用3.0版本的話,是沒有前兩個的,而只有最后兩個,這里是
讓你選的,第一個是默認(rèn)配置,一般選第二個,自己配置,這里選擇最后一個
在選擇功能后,會詢問更細(xì)節(jié)的配置,
TypeScript:
是否使用class風(fēng)格的組件語法:Use class-style component syntax?
是否使用babel做轉(zhuǎn)義:Use Babel alongside TypeScript for auto-detected polyfills?
CSS Pre-processors:
選擇CSS 預(yù)處理類型:Pick a CSS pre-processor
Linter / Formatter
選擇Linter / Formatter規(guī)范類型:Pick a linter / formatter config
選擇lint方式,保存時檢查/提交時檢查:Pick additional lint features
Testing
選擇Unit測試方式
選擇E2E測試方式
當(dāng)你選擇后會出現(xiàn)上面圖上的東西,這里你可以自由選擇用哪些配置,按上下鍵
選擇哪一個,按空格鍵確定,所有的都選擇好后,按enter鍵進(jìn)行下一步,這里
演示,我隨便選了幾個

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

上面這個是問你選擇哪個自動化代碼格式化檢測,配合vscode編輯器的
Prettier - Code formatter插件,我選的隨后一個

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

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

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

下載好后,項(xiàng)目結(jié)構(gòu)就變成這樣了,相比2.0精簡了很多,
然后cd 進(jìn)項(xiàng)目,啟動服務(wù)npm run serve,
這里發(fā)現(xiàn)少了vue.config.js文件,那以前的配置怎么搞?
上邊是2.0的目錄結(jié)構(gòu)
這個是3.0的目錄結(jié)構(gòu),比2.0少了好多,這些都放在@vue/文件下了,你可以打開看看
下邊你要做的就是在根目錄下新建一個vue.config.js文件,進(jìn)行你的配置,具體配置看文檔,我在最下邊簡單羅列了幾個
當(dāng)然如果你不想用3.0的話,還是可以繼續(xù)使用2.0的,官方文檔是這樣說的:

這里簡單羅列vue,config.js一些配置項(xiàng)
當(dāng)然你配置接口地址時還是通過下邊這個來獲取
在main.js里或者單獨(dú)配置接口地址的文件里:
var env = process.env.NODE_ENV console.log(env)
// vue.config.js 配置說明
// 這里只列一部分,具體配置慘考文檔啊
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時 生成文件的目錄 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
/*
構(gòu)建多頁面模式的應(yīng)用程序.每個“頁面”都應(yīng)該有一個相應(yīng)的JavaScript條目文件。該值應(yīng)該是一
個對象,其中鍵是條目的名稱,而該值要么是指定其條目、模板和文件名的對象,要么是指定其條目
的字符串,
注意:請保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動服務(wù)會報錯的
*/
// 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è)置為false可以加速生產(chǎn)構(gòu)建
productionSourceMap: false,
// devServer:{type:Object} 3個屬性host,port,https
// 它支持webPack-dev-server的所有選項(xiàng)
devServer: {
port: 8085, // 端口號
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自動啟動瀏覽器
// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}, // 配置多個代理
}
}
啟用dll
啟用dll后,我們的動態(tài)庫文件每次打包生成的vendor的[chunkhash]值就會一樣,其值可以是 true/false,也可以制定特定的代碼庫。
module.exports = {
dll: true
}
module.exports = {
dll: [
'dep-a',
'dep-b/some/nested/file.js'
]
}
靜態(tài)資源路徑
相對路徑
- 靜態(tài)資源路徑以 @ 開頭代表 <projectRoot>/src
- 靜態(tài)資源路徑以 ~ 開頭,可以引入node modules內(nèi)的資源
public文件夾里的靜態(tài)資源引用
# 在 public/index.html中引用靜態(tài)資源
<%= webpackConfig.output.publicPath %>
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >
# vue templates中,需要在data中定義baseUrl
<template>
<img :src="`${baseUrl}my-image.png`">
</template>
<script>
data () {
return {
baseUrl: process.env.BASE_URL
}
}
</script>
webpack配置修改
用 webpack-chain 修改webpack相關(guān)配置,強(qiáng)烈建議先熟悉webpack-chain和vue-cli 源碼,以便更好地理解這個選項(xiàng)的配置項(xiàng)。
對模塊處理配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('js')
.include
.add(/some-module-to-transpile/) // 要處理的模塊
}
}
修改webpack Loader配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.use('sass-loader')
.tap(options =>
merge(options, {
includePaths: [path.resolve(dirname, 'node_modules')],
})
)
}
}
修改webpack Plugin配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to pass to html-webpack-plugin's constructor */]
})
}
}
eg: 在本次項(xiàng)目較小,只對uglifyjs進(jìn)行了少量的修改,后期如果還有配置上優(yōu)化會繼續(xù)添加。
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config
.plugin('uglify')
.tap(([options]) =>{
// 去除 console.log
return [Object.assign(options, {
uglifyOptions: { compress: {
drop_console : true,
pure_funcs: ['console.log']
}}
})]
})
}
}
全局變量的設(shè)置
在項(xiàng)目根目錄創(chuàng)建以下項(xiàng)目:
.env # 在所有環(huán)節(jié)中執(zhí)行 .env.local # 在所有環(huán)境中執(zhí)行,git會ignored .env.[mode] # 只在特定環(huán)境執(zhí)行( [mode] 可以是 "development", "production" or "test" ) .env.[mode].local # 在特定環(huán)境執(zhí)行, git會ignored .env.development # 只在生產(chǎn)環(huán)境執(zhí)行 .env.production # 只在開發(fā)環(huán)境執(zhí)行
在文件里配置鍵值對:
# 鍵名須以VUE_APP開頭 VUE_APP_SECRET=secret
在項(xiàng)目中訪問:
console.log(process.env.VUE_APP_SECRET)
這樣項(xiàng)目中的 process.env.VUE_APP_SECRET 就會被 secret 所替代。
vue-cli 3 就項(xiàng)目性能而言已經(jīng)相當(dāng)友好了,私有制定性也特別強(qiáng),各種配置也特別貼心,可以根據(jù)項(xiàng)目大小和特性制定私有預(yù)設(shè),對前期項(xiàng)目搭建而言效率極大提升了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue+element+Java實(shí)現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實(shí)現(xiàn)批量刪除功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
項(xiàng)目中Axios二次封裝實(shí)例Demo
vue項(xiàng)目經(jīng)常會用到axios來請求數(shù)據(jù),那么首先肯定需要對這個請求方法進(jìn)行一個二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報插件并打包發(fā)布到npm的詳細(xì)過程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個前端埋點(diǎn)上報插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥磉@個項(xiàng)目可能會加入更多的工具包,需要的朋友可以參考下2022-10-10
如何使用Webstorm和Chrome來調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用Webstorm和Chrome來調(diào)試Vue項(xiàng)目,對Vue感興趣的同學(xué),一定要看一下2021-05-05

