前言
本文系統的梳理了vue-cli3搭建項目的常見用法,目的在於讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點:
- 如何安裝項目插件
- 添加瀏覽器支持
- 如何配置scss/stylus共享全局變量
- 如何整合elementUI等第三方框架並實現按需引入
- 配置單/多頁面
- 如何配置自定義環境變量
- 如何在vue.config.js定製自己的webpack
- vue項目部署
說明
本文末尾會給出一個以上提到的所有功能的一個配置文件,可供大家學習參考。
思維導圖
接下來,我們根據思維導圖,一步步來解釋和實現我們的目標。
1.安裝項目插件
vue add @vue/cli-plugin-eslint
# 或
vue add xjFile
vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。對於普通的 npm 包而言,我們仍然可以(根據所選的 npm 包)使用包管理器。最後可以在vue.config.js做webpack自定義配置
2.添加瀏覽器支持
- browserslist
我們可以通過package.json 文件裏的 browserslist字段或一個單獨的 .browserslistrc 文件來指定項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴
例如:
// .browserslistrc
> 1%
last 2 versions
想要獲取更多browserslist,可移步browserslist
- Polyfill
默認情況下,cli會把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env,這樣它會根據源代碼中出現的語言特性自動檢測需要的 polyfill。這確保了最終包裏 polyfill 數量的最小化。但是如果其中一個依賴需要特殊的 polyfill,默認情況下 Babel 無法將其檢測出來。我們可以通過如下三種方式解決此類問題:
- 將依賴添加到 vue.config.js 中的 transpileDependencies 選項
// vue.config.js
module.exports = {
// 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴,可以在這個選項中列出來
transpileDependencies: ['glob']
}
- 可以使用 @vue/babel-preset-app 的 polyfills 選項預包含所需要的 polyfill
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
- 使用 useBuiltIns: 'entry' 然後在入口文件添加 import '@babel/polyfill',這種方式的問題就是會增加包的大小
3.配置scss/stylus共享全局變量
對與scss,可以使用如下方式開啓:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
// 這裏假設你有 `src/variables.scss` 文件
data: `@import "~@/variables.scss";`
}
}
}
}
對於stylus,本人親測使用如上方式無效,可以通過如下方式實現:
vue add style-resources-loader
// vue.config.js
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
'patterns': [
path.resolve(__dirname, 'src/styles/abstracts/*.styl'),
]
}
}
}
4.整合eleemntUI等第三方框架並實現按需引入
- 安裝babel-plugin-component
npm install babel-plugin-component -D
- 配置babel.config.js
module.exports = {
presets: [
'@vue/app',
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
此時即可按需引入element組件,優化項目體積了。
5.配置單/多頁面
vue-cli默認單頁面結構,我們可以通過配置文件來將項目配置成多頁面:
// vue.config.js
const path = require('path')
module.exports = {
// 單/多頁面
pages: {
index: {
// page 的入口
entry: 'src/home/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時,
// template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Your Web For PC',
// 在這個頁面中包含的塊,默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時,
// 模板會被推導爲 `public/subpage.html`
// 並且如果找不到的話,就回退到 `public/index.html`。
// 輸出文件名會被推導爲 `subpage.html`。
// subpage: 'src/subpage/main.js'
},
}
6.如何配置自定義環境變量
你可以替換你的項目根目錄中的下列文件來指定環境變量:
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入,但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入,但會被 git 忽略
如下:
// .env.local
APPID=123
VUE_APP_SECRET=secret
如果你想在客戶端側代碼中使用環境變量,變量名因以 VUE_APP_開頭,如下可獲取定義的環境變量:
console.log(process.env.VUE_APP_SECRET)
7.如何在vue.config.js定製自己的webpack
我們可以使用cli支持的鏈式調用,或者自定義調用:
// vue-cli內部webpack配置
chainWebpack: config => {
// 設置快捷目錄別名
config.resolve.alias.set('utils',resolve('../utils'))
// 修改靜態資源打包方式,下例爲超過10k才用文件導入的方式,否則爲base64.默認爲4k
// config.module
// .rule('images')
// .use('url-loader')
// .loader('url-loader')
// .tap(options => Object.assign(options, { limit: 10240 }))
},
// webpack自定義配置
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
}
7.vue項目部署
這裏我們使用shell腳本部署,當然大家也可以使用自己熟悉的方式部署:
#!/usr/bin/env sh
# 當發生錯誤時中止腳本
set -e
# 構建
npm run build
# cd 到構建輸出的目錄
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:<USERNAME>/<USERNAME>.bitbucket.io.git master
cd -
最後,上一張相對完整的配置清單:
// vue.config.js
// 自定義vue配置
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
// mock數據
const mockData = require('./mock/test.json');
module.exports = {
// 基本路徑
publicPath: './',
// 輸出文件目錄
// outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
// lintOnSave: true,
// 單/多頁面
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時,
// template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'OpenCoder For PC',
// 在這個頁面中包含的塊,默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時,
// 模板會被推導爲 `public/subpage.html`
// 並且如果找不到的話,就回退到 `public/index.html`。
// 輸出文件名會被推導爲 `subpage.html`。
// subpage: 'src/subpage/main.js'
},
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啓 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
// stylus: {
// // @/ 是 src/ 的別名
// // 所以這裏假設你有 `src/variables.stylus` 這個文件, 不過目前測試無效
// data: `@import "~@/style/variables.styl";`
// }
},
// 啓用 CSS modules for all css / pre-processor files.
modules: false
},
pluginOptions: {
// 共享變量
'style-resources-loader': {
preProcessor: 'stylus',
patterns: [
//這個是加上自己的路徑,
//注意:試過不能使用別名路徑
resolve('src/style/variables.styl'),
]
}
},
devServer: {
// 端口
port: 3000,
// 配置代理
proxy: {
'^/api': {
target: 'http://localhost:8081',
ws: true,
changeOrigin: true
},
'^/data': {
target: 'http://localhost:3000'
}
},
// mock
before(app){
app.get('/api/getUser',(req,res,next)=>{
res.json(mockData);
})
}
},
// vue-cli內部webpack配置
chainWebpack: config => {
// 設置快捷目錄別名
config.resolve.alias.set('utils',resolve('../utils'))
// 修改靜態資源打包方式,下例爲超過10k才用文件導入的方式,否則爲base64.默認爲4k
// config.module
// .rule('images')
// .use('url-loader')
// .loader('url-loader')
// .tap(options => Object.assign(options, { limit: 10240 }))
},
// webpack配置
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
}
}
// babel.config.js
module.exports = {
presets: [
'@vue/app',
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
// .browserslistrc
> 1%
last 2 versions
// package.json
{
"name": "pc",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:serve": "serve -s dist",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"clipboard": "^2.0.4",
"core-js": "^2.6.5",
"element-ui": "^2.9.1",
"register-service-worker": "^1.6.2",
"serve": "^11.0.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-pwa": "^3.8.0",
"@vue/cli-plugin-unit-mocha": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"chai": "^4.1.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-template-compiler": "^2.6.10"
}
}
本文梳理了一個最基本的cli3項目配置流程,我們可以根據這個思維導圖,去搭建自己的項目。
本文參考vue-cli官網
如想獲取思維導圖高清源文件,請掃描下方公衆號:
在公衆號點擊進羣,可以加入vue學習小組,一起學習前端技術
更多推薦
歡迎關注後續推文