如何架构一个中后台项目的前端部分（webpack + 接口配置篇）

最新推荐文章于 2024-06-25 13:00:00 发布

烟雨平生V

最新推荐文章于 2024-06-25 13:00:00 发布

阅读量811

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_37903468/article/details/100986576

版权

本文详细介绍了在Vue CLI 3.x环境下，如何配置webpack和处理接口部分。通过`vue inspect`查看webpack配置，使用`vue.config.js`进行自定义设置，包括基础配置、额外配置、本地配置和特殊配置。此外，文章讨论了接口封装的最佳实践，如统一管理接口URL，使用axios拦截器处理请求和响应，以及如何利用MockJS进行接口模拟，以便在接口未完成时进行本地开发。

摘要由CSDN通过智能技术生成

前言
上篇文章：如何架构一个中后台项目的前端部分（技术选型篇）
当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。虽然说用脚手架能够帮助我们完成基本的目录构建和一些基础配置，但是其他很多实用的功能及特殊配置都需要自己动手实践，根据实际场景进行针对性的设置。
本文主要介绍下项目使用 Vue CLI 3.x 构建后，如何正确的配置 webpack 及接口部分。
webpack 配置
首先你需要知道的是，Vue CLI 3 的 vue-cli-service 集成了一份 webpack 的主流配置，可以满足基础场景的开发任务。这一份配置你可以通过在项目根目录运行以下命令查看：
vue inspect

或者

vue ui # 进入对应项目后点击任务中的 inspect 任务查看
复制代码基本配置
如果你不想使用 vue-cli-service 集成的 webpack 默认配置，你可以在根目录的 vue.config.js（没有需自己新建）中修改它。比如说修改一些基础的配置项：
/* vue.config.js */

// 配置化文件
const configs = require(’./config’)

// 根据环境判断使用哪份配置
const isPro = process.env.NODE_ENV === ‘production’
const cfg = isPro ? configs.build : configs.dev

module.exports = {
…

publicPath: cfg.BASE_URI, // 部署应用包时的基本 URL
outputDir: configs.build.outputDir, // 输出目录
assetsDir: configs.build.assetsDir, // 放置生成的静态资源目录
lintOnSave: cfg.lintOnSave, // 是否启用 eslint
productionSourceMap: configs.build.productionSourceMap, // 生产环境是否启用 sourceMap

...

}
复制代码一般情况下我们建议将配置化的东西单独存放到配置文件中进行管理，比如上述的 config 目录，然后根据不同环境引入不同配置，便于修改和查看。
额外配置
除此之外，针对项目的需要，你可能还需要注入一些额外的环境变量，抑或限制下 url-loader 的大小，或者移除 prefetch 插件，设置下 alias，你可以这样配置：
module.exports = {
…

chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 限制 url-loader 大小
    config.module
        .rule('images')
        .use('url-loader')
        .tap(options => merge(options, {
            limit: 5120,
        }))

    // 注入环境变量
    config.plugin('define')
        .tap(args => {
            let name = 'process.env'

            // 使用 merge 保证原始值不变
            args[0][name] = merge(args[0][name], {
                ...cfg.env
            })

            return args
        })

    // alias 设置
    config.resolve.alias
        .set('_img', resolve('src/assets/images'))
    
    // 关闭包大小告警提示
    config.performance.set('hints', false)
},

...

}
复制代码除了我们可以用 chainWebpack 这一函数来对内部的