vue-cli@3.0 使用及配置說明
使用vue-cli3已經有至關一段時間了，一直沒怎麼去注意其中的配置，因此趁着這段時間總結下應用過程當中的一些經驗，本文是從安裝到開發使用的一個過程講解，也能夠說是新手向的文章，文字有點多，請耐心觀看。css
（一）安裝：
一、下載安裝node: 登錄node官網 並選擇本身合適的node版本進行安裝；html
二、安裝vue-cli腳手架工具vue
npm install -g @vue/cli
# OR
# 推薦使用
npm install -g yarn # 若是已有安裝，此步驟不須要
yarn global add @vue/cli
複製代碼
（二）建立一個項目：
vue create my-project
# OR
vue ui
複製代碼
- 選擇合適的配置
# 版本信息
Vue CLI v3.7.0
? Please pick a preset:
# 基礎配置
vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
default (babel, eslint)
# 自定義配置，這裏咱們選擇自定義選項，點擊回車
> Manually select features
複製代碼
- 選擇須要的插件及編譯工具
? Check the features needed for your project:
# 代碼轉換，可讓你更好的書寫前沿技術
(*) Babel
# JavaScript 的一個超集，好東西用起來
(*) TypeScript
# PWA支持,不要求使用能夠不選
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
# css預編譯器
(*) CSS Pre-processors
# 代碼格式化
(*) Linter / Formatter
# 書寫單元測試用的，不要求使用能夠不選
>(*) Unit Testing
( ) E2E Testing
複製代碼
- 接下來的配置選項
# 是否使用class風格進行組件開發
? Use class-style component syntax? Yes
# 使用 babel 對 TypeScript 代碼進行編譯轉換
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 選擇css預編譯，這裏咱們選擇Sass/SCSS
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
# 選擇代碼格式化配置
? Pick a linter / formatter config: Standard
# 代碼檢查方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
# 選擇單元測試工具
? Pick a unit testing solution: Mocha
# 是否將配置放在單獨的文件中
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# 是否將這次配置保存
? Save this as a preset for future projects? No
複製代碼
- 最後
cd my-project
npm run install
npm run serve
# OR 推薦使用
yarn install
yarn serve
複製代碼
（三）目錄結構
（四）環境變量配置
環境變量說明node
.env # 在全部的環境中被載入
.env.local # 在全部的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
複製代碼
- 新建環境變量 .env.development.test 用於測試環境 並添加以下代碼
NODE_ENV='development'
VUE_APP_URL='你的測試環境域名'
複製代碼
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你能夠在應用的代碼中這樣訪問它們：webpack
console.log(process.env.VUE_APP_URL)
複製代碼
- 修改
package.json,並在scripts裏面添加以下代碼
"serve:test": "vue-cli-service serve --mode development.test",
複製代碼
- 若是項目中有使用到公共環境變量，爲了不在每一個.env文件中配置，咱們也能夠在
vue.config.js裏面進行配置
在設置以前咱們先來看下2.0時代的環境變量配置，以前在 prod.env.js 中咱們會以下配置：ios
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
複製代碼
顯然這樣的配置咱們目前不能修改，由於目前的配置文件只有vue.config.js，因此咱們添加以下代碼，進行公共環境變量的設置。git
// vue.config.js
module.exports = {
chainWebpack: config => {
// 添加環境變量
config.plugin("define")
.tap(args => {
args[0]["process.env"].VUE_APP_ENVBANE = JSON.stringify("環境變量值")
return args;
});
},
}
複製代碼
（五）添加配置文件 vue.config.js
vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可使用 package.json 中的 vue 字段，可是注意這種寫法須要你嚴格遵守 JSON 的格式來寫。web
// vue.config.js
module.exports = {
// baseUrl從 Vue CLI 3.3 起已棄用，請使用publicPath。
// baseUrl:'./',
// 配置sub-path後訪問路徑爲https://xxx-path/sub-path/#/
publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
// 輸出文件路徑，默認爲dist
outputDir: 'dist',
// 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
assetsDir: '',
// 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也能夠是一個絕對路徑
indexPath: '',
// 配置多頁應用
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在這個頁面中包含的塊，默認狀況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導爲 `public/subpage.html`
// 而且若是找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導爲 `subpage.html`。
subpage: 'src/subpage/main.js',
},
lintOnSave: true, // 保存時 lint 代碼
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啓 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
// pass options to sass-loader
sass: {
// 自動注入全局變量樣式
data: `
@import "src/你的全局scss文件路徑";
`
}
},
// 啓用 CSS modules for all css / pre-processor files.
modules: false,
},
// 生產環境是否生成 sourceMap 文件
productionSourceMap: false,
//是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建。
parallel: require('os').cpus().length > 1,
// 全部 webpack-dev-server 的選項都支持
devServer: {
port: 8080, // 配置端口
open: true, // 自動開啓瀏覽器
compress: true, // 開啓壓縮
// 設置讓瀏覽器 overlay 同時顯示警告和錯誤
overlay: {
warnings: true,
errors: true
},
// 設置請求代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
},
}
複製代碼
（六）修改webpack配置信息
vue-cli3.0的版本已經將webpack的配置整合進vue.config.js裏面了vue-router
// 安裝 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安裝 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D
// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
chainWebpack: config => {
// 引入babel-polyfill
config
.entry('index')
.add('babel-polyfill')
.end();
// 添加文件路徑別名
config.resolve.alias.set("@", resolve("src"));
if (isProduction) {
// 生產環境注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: config => {
if (isProduction) {
// 爲生產環境修改配置...
config.plugins.push(
//添加代碼壓縮工具，及設置生產環境自動刪除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
} else {
// 爲開發環境修改配置...
}
},
}
複製代碼
- 分離第三方插件，引入cdn配置
這裏介紹一個開源的cdn庫 www.bootcdn.cn/vuex
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
css: [],
js: [
'https://xxx-cdn-path/vue.runtime.min.js',
'https://xxx-cdn-path/vue-router.min.js',
'https://xxx-cdn-path/vuex.min.js',
'https://xxx-cdn-path/axios.min.js',
]
}
module.exports = {
configureWebpack: config => {
if (isProduction) {
// 用cdn方式引入,分離第三方插件
config.externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
} else {
// 爲開發環境修改配置...
}
},
}
複製代碼
修改html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
<title>my-project</title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
複製代碼
（七）關於打包後請求數的優化點Preload and Prefetch
首先咱們看一張圖
從圖中咱們能夠看出首次加載的資源很是多，有217個請求，爲何會這樣呢？
查看官方文檔，能夠得知：
<link rel="preload"> 是一種 resource hint，用來指定頁面加載後很快會被用到的資源，因此在頁面加載的過程當中，咱們但願在瀏覽器開始主體渲染以前儘早 preload。
默認狀況下，一個 Vue CLI 應用會爲全部初始化渲染須要的文件自動生成 preload 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，而且能夠經過 chainWebpack 的 config.plugin('preload') 進行修改和刪除。
複製代碼
<link rel="prefetch"> 是一種 resource hint，用來告訴瀏覽器在頁面加載完成後，利用空閒時間提早獲取用戶將來可能會訪問的內容。
默認狀況下，一個 Vue CLI 應用會爲全部做爲 async chunk 生成的 JavaScript 文件 (經過動態 import() 按需 code splitting 的產物) 自動生成 prefetch 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，而且能夠經過 chainWebpack 的 config.plugin('prefetch') 進行修改和刪除。
複製代碼
因此修改vue.config.js文件
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('preload');
config.plugins.delete('prefetch');
}
}
複製代碼
（八）總結
vue-cli3在項目配置上精簡了不少，並且它也提供了不少配置選項，知足定製化須要。各類配置也特別貼心，能夠按照本身項目的須要進行自定義修改，大大減小了提高了開發的工做效率。
以上就是本文的所有內容，咱們已經將vue-cli3.0從安裝到修改配置的過程講解結束了，但願對你們的學習有所幫助
本文做者： Echi
本文連接： juejin.im/user/585e36…
版權聲明： 本文章除特別聲明外，均採用 @BY-NC-SA 許可協議。轉載請註明出處！
相關文章
- 1. webpack 3.0 配置說明
- 2. vue-cil 3.0 配置說明
- 3. VSS配置及使用說明
- 4. swagger的說明、配置及使用
- 5. 緩存說明及varnish說明配置
- 6. nginx配置以及說明
- 7. log4j的配置及說明
- 8. Maven配置說明
- 9. phpcms使用說明及語法說明
- 10. SpringMVC與Mybatis配置及整合說明
- 更多相關文章...
- • PHP EOF(heredoc) 使用說明 - PHP教程
- • Spring Bean的配置及常用屬性 - Spring教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webpack 3.0 配置說明
- 2. vue-cil 3.0 配置說明
- 3. VSS配置及使用說明
- 4. swagger的說明、配置及使用
- 5. 緩存說明及varnish說明配置
- 6. nginx配置以及說明
- 7. log4j的配置及說明
- 8. Maven配置說明
- 9. phpcms使用說明及語法說明
- 10. SpringMVC與Mybatis配置及整合說明