js_脚本之家,webpack配置逐行阅读

在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录

js_脚本之家,webpack配置逐行阅读。最近在阅读同事的vue工程配置,觉得自己对webpack配置的了解还是不够详细,于是down了最新的vue-cli脚手架,来逐行阅读下其中相关的配置,以便对工程整体有详细的了解

第一种

先看下最新的vue-cli 脚手架下载的目录

在工程目录下 > config > index.js- 修改为如下配置

图片 1

proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } },

package.json

在工程目录下 > src > api > user.js- 接口写法

可以看到,分别具有

import axios from 'axios'export function getIdcsList() { return axios.get}export function getPaginationList { return axios.get(`/api/idcs/?page=${params.page}`)}

build config node_modules src static 一些配置文件

第二种

其中build和config文件夹下存放的就是我们webpack和配置相关的文件,展开看下

在工程目录下 > config > dev.env.js修改为如下

图片 2

module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API: '"http://127.0.0.1:8000"',})

目录

在工程目录下 > src > api > user.js- 接口写法

先对各个文件有个大概的了解,然后我们依次来看:

import request from '@/utils/request'export function getUserList { return request({ url: '/users/', method: 'get', params })}

一、package.json

以上所述是小编给大家介绍的vue配置后台接口方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

我们知道启动一个项目首先先查看package.json的配置,package.json会对包的基本信息,运行信息,依赖做展示和管理,

先把依赖折叠,我们看下其他的信息:

图片 3

package.json

从入口node命令我们看到,启动项目的命令问npm run dev,而dev的配置为

webpack-dev-server –inline –progress –config
build/webpack.dev.conf.js

意味着我们用dev-server这个开发插件运行build目录下的webpack.dev.conf.js,那我们进入目录下查看webpack.dev.conf.js具体有那些内容

二、webpack.dev.conf.js

图片 4

webpack.dev.conf.js-1

通过概览整个文件我们得知:文件引入了一些配置和插件,然后配置了dev配置,并将dev配置导出。

其中,第19行,const devWebpackConfig = merge(baseWebpackConfig,
{});调用merge方法对base配置和dev配置做了合并,

我们先进入baseconfig页面查看base做了哪些公用的配置

三、webpack.base.conf.js

图片 5

webpack.base.conf.js-1

base.conf.js引入了工具函数,config文件配置,和对项目相关的入口、输出、路径、laoder做了基本的配置,

这些都是webpakc的基本配置选项,就不做赘述,不了解可以去官网看api。

展开来看:

图片 6

webpack.base.conf.js-2

图片 7

webpack.base.conf.js-3

其中59行用到了utils的工具方法assetsPath,我们先去查看下这个方法是干嘛用的:

图片 8

utils.js-1

可以看到assetsPath方法就是对静态文件和地址进行了拼接。

再看base.conf.js里还用到了很多config下的配置,我们进入config文件,看他配好了哪些参数用来调用。

根据文件头部的require,进入config文件夹,打开index.js,
先折叠概览,发现config文件夹内对dev和build

分别做了两份配置。

图片 9

config.js-1

dev和build的想关配置我都做了注释:

图片 10

config.js-2

图片 11

config.js-2

图片 12

config.js-3

参考config配置,可以对base.conf有了基本的了解。通用的配置在base里都进行了调用

四、再看webpack.dev.conf.js剩下配置

了解了base的配置我们回头再来看dev.conf.js。我们展开devWebpackConfig方法,可以看到:

图片 13

dev.conf.js-2

图片 14

dev.conf.js-3

看出,devWebpackConfig配置了处理样式的module,根据config的配置开启了一些devServer,并且声明了一些常用的插件。

关于build.js,prod.conf.js还有版本控制的check-version我在下篇文章里再会继续介绍~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注