基于 Vue 的前端架构，我做了这 15 点，web开发项目

所有的静态资源文件都会上传到 阿里云 OSS 上，所以在环境变量上加以区分。

.env.development 与 .env.production 的 VUE_APP_STATIC_URL 属性分别配置了本地的静态资源服务器地址和线上 OSS 的地址。

本地的静态资源服务器是通过 pm2 + http-server 创建的，设计师切完直接扔进来就好了。

自动注册 Svg 图标

在日常的开发中，总是会有着大量的图标需要使用，这里我们直接选择使用 SVG 图标。但是如果每次使用图标还需要通过路径找到这张图标岂不是很麻烦？

下面这种才是我想要的方案（直接 name 等于 文件名即可）：

而且最后打包后需要合并成一张雪碧图。

首先需要对 @/assets/icons 文件夹下的 svg 图标进行自动注册，需要对 webpack 和 svg-sprite-loader 进行了相关设置，文件全部打包成 svg-sprite。

module.exports = {

chainWebpack: (config) => {

config.module

.rule(‘svg’)

.exclude.add(resolve(‘src/assets/icons’))

.end();

config.module

.rule(‘icons’)

.test(/.svg$/)

.include.add(resolve(‘src/assets/icons’))

.end()

.use(‘svg-sprite-loader’)

.loader(‘svg-sprite-loader’);

},

}

写一个全局用的 Vue 组件 <m-svg />:

// @/components/m-svg/index.js

const requireAll = (requireContext) => requireContext.keys().map(requireContext);

const req = require.context(‘@/assets/icons’, false, /.svg$/);

requireAll(req);

@/components/m-svg/index.vue

参数 name

• 类型：String

• 默认值：null

• 说明：放置在 @/assets/icons 文件夹下的文件名

样式

• 图标的大小可以通过 width + height 属性改变。

• 通过改变 font-size 属性改变，宽高 = font-zise * 1.4

5.异步请求

---

封装 Axios

在 @/libs/request.js 路径下对 Axios 进行封装，封装了请求参数，请求头，以及错误提示信息、 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

废话不说直接贴代码：

import axios from ‘axios’;

import get from ‘lodash/get’;

import storage from ‘store’;

// 创建 axios 实例

const request = axios.create({

// API 请求的默认前缀

baseURL: process.env.VUE_APP_BASE_URL,

timeout: 10000, // 请求超时时间

});

// 异常拦截处理器

const errorHandler = (error) => {

const status = get(error, ‘response.status’);

switch (status) {

/* eslint-disable no-param-reassign */

case 400: error.message = ‘请求错误’; break;

case 401: error.message = ‘未授权，请登录’; break;

case 403: error.message = ‘拒绝访问’; break;

case 404: error.message = 请求地址出错: ${error.response.config.url}; break;

case 408: error.message = ‘请求超时’; break;

case 500: error.message = ‘服务器内部错误’; break;

case 501: error.message = ‘服务未实现’; break;

case 502: error.message = ‘网关错误’; break;

case 503: error.message = ‘服务不可用’; break;

case 504: error.message = ‘网关超时’; break;

case 505: error.message = ‘HTTP版本不受支持’; break;

default: break;

/* eslint-disabled */

}

return Promise.reject(error);

};

// request interceptor

request.interceptors.request.use((config) => {

// 如果 token 存在

// 让每个请求携带自定义 token 请根据实际情况自行修改

// eslint-disable-next-line no-param-reassign

config.headers.Authorization = bearer ${storage.get('ACCESS_TOKEN')};

return config;

}, errorHandler);

// response interceptor

request.interceptors.response.use((response) => {

const dataAxios = response.data;

// 这个状态码是和后端约定的

const { code } = dataAxios;

// 根据 code 进行判断

if (code === undefined) {

// 如果没有 code 代表这不是项目后端开发的接口

return dataAxios;

// eslint-disable-next-line no-else-return

} else {

// 有 code 代表这是一个后端接口 可以进行进一步的判断

switch (code) {

case 200:

// [ 示例 ] code === 200 代表没有错误

return dataAxios.data;

case ‘xxx