最近的開發(fā)項(xiàng)目中使用了vue-cli 3.0，使用體驗(yàn)可以說(shuō)非常棒了，模板更加制定化，配置更加簡(jiǎn)潔。以下總結(jié)下應(yīng)用過(guò)程中的一些經(jīng)驗(yàn)。
1. 安裝
npm install -g @vue/cli
2. 創(chuàng)建一個(gè)項(xiàng)目
vue create iview-admin # OR vue ui
3. 運(yùn)行項(xiàng)目
$ npm run serve
4. 在根目錄創(chuàng)建 vue.config.js 空文件，配置 文件
module.exports = {
/** 區(qū)分打包環(huán)境與開發(fā)環(huán)境
* process.env.NODE_ENV==='production' (打包環(huán)境)
* process.env.NODE_ENV==='development' (開發(fā)環(huán)境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 基本路徑
baseUrl: '/',
// 設(shè)置代理
# string
module.exports = {
devServer: {
proxy: '<url>'
}
}
# Object
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}啟用dll
啟用dll后，我們的動(dòng)態(tài)庫(kù)文件每次打包生成的vendor的[chunkhash]值就會(huì)一樣，其值可以是 true/false,也可以制定特定的代碼庫(kù)。
module.exports = {
dll: true
}
module.exports = {
dll: [
'dep-a',
'dep-b/some/nested/file.js'
]
}靜態(tài)資源路徑
相對(duì)路徑
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 源碼，以便更好地理解這個(gè)選項(xiàng)的配置項(xiàng)。
對(duì)模塊處理配置
// 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)目較小，只對(duì)uglifyjs進(jìn)行了少量的修改，后期如果還有配置上優(yōu)化會(huì)繼續(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會(huì)ignored .env.[mode] # 只在特定環(huán)境執(zhí)行( [mode] 可以是 "development", "production" or "test" ) .env.[mode].local # 在特定環(huán)境執(zhí)行, git會(huì)ignored .env.development # 只在生產(chǎn)環(huán)境執(zhí)行 .env.production # 只在開發(fā)環(huán)境執(zhí)行
在文件里配置鍵值對(duì)：
# 鍵名須以VUE_APP開頭 VUE_APP_SECRET=secret
在項(xiàng)目中訪問(wèn)：
console.log(process.env.VUE_APP_SECRET)
這樣項(xiàng)目中的 process.env.VUE_APP_SECRET 就會(huì)被 secret 所替代。
vue-cli 3 就項(xiàng)目性能而言已經(jīng)相當(dāng)友好了，私有制定性也特別強(qiáng)，各種配置也特別貼心，可以根據(jù)項(xiàng)目大小和特性制定私有預(yù)設(shè)，對(duì)前期項(xiàng)目搭建而言效率極大提升了。
具體請(qǐng)查看 Vue Cli 官網(wǎng)
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
