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教程