Vue學習筆記(三)------配置項

時間  2019-11-08
標籤 vue 學習 筆記 配置 简体版
原文   原文鏈接

包管理工具和配置項

  • npm和package.jsonjavascript

    npm 是 Node Package Manager 的簡稱，顧名思義，它是 node 的包管理工具，也是目前世界上最大的開源庫生態系統。css

    使用 vue-cli 來構建本身的項目，並生成了相應的目錄結構，而在最外層目錄中，咱們能夠看到有 package.json 這一文件，該文件即是咱們須要瞭解的包管理文件，例如：html

    {
    "name": "my-project", 
    "version": "0.1.0", 
    "private": true, 
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "vue": "^2.5.16",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.0.0-beta.15",
        "@vue/cli-service": "^3.0.0-beta.15",
        "less": "^3.0.4",
        "less-loader": "^4.1.0",
        "vue-template-compiler": "^2.5.16"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}
複製代碼

    能夠看到該文件是由一系列鍵值對構成的 JSON 對象，每個鍵值對都有其相應的做用，好比 scripts 腳本命令的配置，咱們在終端啓動項目運行的 npm run serve 命令其實即是執行了 scripts 配置下的 serve 項命令 vue-cli-service serve ，咱們能夠在 scripts 下本身修改或添加相應的項目命令。前端

    而 dependencies 和 devDependencies 分別爲項目生產環境和開發環境的依賴包配置，也就是說像 @vue/cli-service 這樣只用於項目開發時的包咱們能夠放在 devDependencies 下，但像 vue-router 這樣結合在項目上線代碼中的包應該放在 dependencies 下。vue

    詳細的package.json文件配置項介紹能夠參考：package.jsonjava

  • 經常使用命令node

    # 生成 package.json 文件（須要手動選擇配置）
npm init

# 生成 package.json 文件（使用默認配置）
npm init -y

# 一鍵安裝 package.json 下的依賴包
npm i

# 在項目中安裝包名爲 xxx 的依賴包（配置在 dependencies 下）
npm i xxx

# 在項目中安裝包名爲 xxx 的依賴包（配置在 dependencies 下）
npm i xxx --save

# 在項目中安裝包名爲 xxx 的依賴包（配置在 devDependencies 下）
npm i xxx --save-dev

# 全局安裝包名爲 xxx 的依賴包
npm i -g xxx

# 運行 package.json 中 scripts 下的命令
npm run xxx
複製代碼

  • 第三方插件的配置webpack

    在上方的 package.json 文件中咱們能夠看到有 browserslist 這一配置項，那麼該配置項即是這裏所說的第三方插件配置，該配置的主要做用是用於在不一樣的前端工具之間共享目標瀏覽器和 Node.js 的版本：git

    "browserslist": [
    "> 1%", // 表示包含全部使用率 > 1% 的瀏覽器
    "last 2 versions", // 表示包含瀏覽器最新的兩個版本
    "not ie <= 8" // 表示不包含 ie8 及如下版本
]
複製代碼

    好比像 autoprefixer 這樣的插件須要把你寫的 css 樣式適配不一樣的瀏覽器，那麼這裏要針對哪些瀏覽器呢，就是上面配置中所包含的。github

    而若是寫在 autoprefixer 的配置中，那麼會存在一個問題，萬一其餘第三方插件也須要瀏覽器的包含範圍用於實現其特定的功能，那麼就又得在其配置中設置一遍，這樣就沒法得以共用。因此在 package.json 中配置 browserslist 的屬性使得全部工具都會自動找到目標瀏覽器。

    固然，你也能夠單獨寫在 .browserslistrc 的文件中：

    # Browsers that we support 

> 1%
last 2 versions
not ie <= 8
複製代碼

    至於它是如何去衡量瀏覽器的使用率和版本的，數據都是來源於 Can I Use。你也能夠訪問 browserl.ist/ 去搜索配置項所包含的瀏覽器列表，好比搜索 last 2 versions 會獲得你想要的結果。

    如今項目中的配置是寫在package.json中的：

    [外鏈圖片轉存失敗(img-hQHv18nP-1563614821016)(C:\Users\liumingxin\AppData\Roaming\Typora\typora-user-images\1563611354125.png)]

Webpack在CLI3中的應用

​ Webpack 做爲目前最流行的項目打包工具，被普遍使用於項目的構建和開發過程當中，其實說它是打包工具備點大材小用了，我我的認爲它是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你能夠根據本身的須要來進行一系列的配置和安裝，最終實現你須要的功能並進行打包輸出。在 Vue 的項目中，webpack 一樣充當着舉足輕重的做用，好比打包壓縮、異步加載、模塊化管理等等。

  • webpack的使用

    若是你使用過 vue-cli 2.x，那麼你應該瞭解其構建出的目錄會包含相應的 webpack 配置文件，可是在 vue-cli 3.x 中你卻見不到一份關於 webpack 的配置文件，難道 3.x 拋棄了 webpack？其實否則，3.x 提供了一種開箱即用的模式，即你無需配置 webpack 就能夠運行項目，而且它提供了一個 vue.config.js 文件來知足開發者對其封裝的 webpack 默認配置的修改。如圖：

在這裏插入圖片描述

你可能會有個疑問，經過vue-cli3新建的項目，怎麼找不到vue.config.js 文件在哪？遇到這種狀況你須要在本身的根目錄下新建一個vue.config.js的文件。

咱們本身的項目中沒有使用這中方式，先看一下目前項目結構：

在這裏插入圖片描述

便於打包或者配置的管理，通常會在項目下邊創建兩個文件夾： build和config文件夾，config文件夾中主要對外提供配置的文件是index.js文件。而build包中build.js中會導入config中的配置進行打包操做。同時package.json中配置，以下：

在這裏插入圖片描述

注意build.js中配置，也會讀取webpack.prod.conf.js：

在這裏插入圖片描述

上面是打包時讀取的配置，開發環境下讀取的配置以下：

\[

能夠簡單的看一下webpack.dev.conf.js中的配置：

在這裏插入圖片描述

它又會引用webpack.dev.base.js中的配置項，webpack.dev.base.js的配置項以下:

[外鏈圖片轉存失敗(img-5lFwKQB5-1563614821021)(C:\Users\liumingxin\AppData\Roaming\Typora\typora-user-images\1563613415808.png)]

也就是說咱們如今項目中以下圖所示的文件中的配置和vue.config.js 中的配置基本相似，可是隨着項目的增大，通常再也不直接使用vue.config.js，而是使用這種配置方式：

在這裏插入圖片描述

  • vue.config.js 的配置項的介紹

    這種方式配置是經過vue提供的方式進行配置。

    • baseurl

    在第一節《Vue CLI 3 項目構建基礎》中咱們經過 vue-cli 3.x 成功構建並在瀏覽器中打開 http://localhost:8080/ 展現了項目首頁。若是如今你想要將項目地址加一個二級目錄，好比：http://localhost:8080/vue/，那麼咱們須要在 vue.config.js 裏配置 baseurl 這一項：

    // vue.config.js
module.exports = {
    ...
    
    baseUrl: 'vue',
    
    ...
}
複製代碼

    其改變的實際上是 webpack 配置文件中 output 的 publicPath 項，這時候你重啓終端再次打開頁面的時候咱們首頁的 url 就會變成帶二級目錄的形式。

    • outputDir

    若是你想將構建好的文件打包輸出到 output 文件夾下（默認是 dist 文件夾），你能夠配置：

    // vue.config.js
module.exports = {
    ...
    
    outputDir: 'output',
    
    ...
}
複製代碼

    而後運行命令 yarn build 進行打包輸出，你會發現項目跟目錄會建立 output 文件夾， 這其實改變了 webpack 配置中 output 下的 path 項，修改了文件的輸出路徑。

    • productionSourceMap

    該配置項用於設置是否爲生產環境構建生成 source map，通常在生產環境下爲了快速定位錯誤信息，咱們都會開啓 source map：

    // vue.config.js
module.exports = {
    ...
    
    productionSourceMap: true,
    
    ...
}
複製代碼

    該配置會修改 webpack 中 devtool 項的值爲 source-map。

    開啓 source map 後，咱們打包輸出的文件中會包含 js 對應的 .map 文件，其用途能夠參考：JavaScript Source Map 詳解

    • chainWebpack

    chainWebpack 配置項容許咱們更細粒度的控制 webpack 的內部配置，其集成的是 webpack-chain這一插件，該插件可讓咱們可以使用鏈式操做來修改配置，好比：

    // 用於作相應的合併處理
const merge = require('webpack-merge');

module.exports = {
    ...
    
    // config 參數爲已經解析好的 webpack 配置
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .tap(options =>
                merge(options, {
                  limit: 5120,
                })
            )
    }
    
    ...
}
複製代碼

    以上操做咱們能夠成功修改 webpack 中 module 項裏配置 rules 規則爲圖片下的 url-loader 值，將其 limit 限制改成 5M，修改後的 webpack 配置代碼以下：

    {
    ...
    
    module: {
        rules: [
            {   
                /* config.module.rule('images') */
                test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
                use: [
                    /* config.module.rule('images').use('url-loader') */
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5120,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    }
    
    ...
}
複製代碼

    這裏須要注意的是咱們使用了 webpack-merge 這一插件，該插件用於作 webpack 配置的合併處理，這樣 options 下面的其餘值就不會被覆蓋或改變。

    關於 webpack-chain 的使用能夠參考其 github 官方地址：github.com/mozilla-neu…，它提供了操做相似 JavaScript Set 和 Map 的方式，以及一系列速記方法。

    img

    • configureWebpack

    除了上述使用 chainWebpack 來改變 webpack 內部配置外，咱們還可使用 configureWebpack 來進行修改，二者的不一樣點在於 chainWebpack 是鏈式修改，而 configureWebpack 更傾向於總體替換和修改。示例代碼以下：

    // vue.config.js
module.exports = {
    ...
    
    // config 參數爲已經解析好的 webpack 配置
    configureWebpack: config => {
        // config.plugins = []; // 這樣會直接將 plugins 置空
        
        // 使用 return 一個對象會經過 webpack-merge 進行合併，plugins 不會置空
        return {
            plugins: []
        }
    }
    
    ...
}
複製代碼

    configureWebpack 能夠直接是一個對象，也能夠是一個函數，若是是對象它會直接使用 webpack-merge 對其進行合併處理，若是是函數，你能夠直接使用其 config 參數來修改 webpack 中的配置，或者返回一個對象來進行 merge 處理。

    你能夠在項目目錄下運行 vue inspect 來查看你修改後的 webpack 完整配置，固然你也能夠縮小審查範圍，好比：

    # 只查看 plugins 的內容
vue inspect plugins
複製代碼
    • devServer

    vue.config.js 還提供了 devServer 項用於配置 webpack-dev-server 的行爲，使得咱們能夠對本地服務器進行相應配置，咱們在命令行中運行的 yarn serve 對應的命令 vue-cli-service serve 其實即是基於 webpack-dev-server 開啓的一個本地服務器，其經常使用配置參數以下：

    // vue.config.js
module.exports = {
    ...
    
    devServer: {
        open: true, // 是否自動打開瀏覽器頁面
        host: '0.0.0.0', // 指定使用一個 host。默認是 localhost
        port: 8080, // 端口地址
        https: false, // 使用https提供服務
        proxy: null, // string | Object 代理設置
        
        // 提供在服務器內部的其餘中間件以前執行自定義中間件的能力
        before: app => {
          // `app` 是一個 express 實例
        }
    }
    
    ...
}
複製代碼

    固然除了以上參數，其支持全部的 webpack-dev-server 中的選項，好比 historyApiFallback 用於重寫路由（會在後續的多頁應用配置中講解）、progress 將運行進度輸出到控制檯等，具體可參考：devServer

    以上講解了 vue.config.js 中一些經常使用的配置項功能，具體的配置實現須要結合實際項目進行，完整的配置項能夠查看：vue.config.js

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程