vue项目基本的环境搭建

今天简单的描述一下vue项目基本的环境是如何搭建的，以及一些注意事项。
其实很早有想写这篇文章的想法，但是想着这种问题挺基础的，而且网上也有挺多的教程，不过周围刚接触前端项目的同学经常来问我怎么搭建前端环境，所以想想还是有必要总结一下的。

目录结构

首先看一下使用vue-cli搭建的基本项目目录结构：

如上图，这个项目结构一般是我们开发项目所需要的最基本的结构，各个文件夹的作用也在图中标明。
创建完这样的项目结构之后，我们就要开始进行一些具体的环境搭建配置了。

网络拦截配置

配置网络拦截器，我们一般需要在utils文件夹中创建一个request.js文件（本文中提到的文件名称仅供参考）。
下边是比较基础的网络请求拦截配置。

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API // 当前环境所指向的接口地址
    timeout: 8000 // 请求超时时间
});


// 配置请求和响应拦截
service.interceptors.request.use(
    (config) => {
        config.headers['Authorization'] = localStorage.getItem('token');
        config.headers['Content-Type'] = 'application/json';
        return config
    }, err => {
        return err
    })

service.interceptors.response.use(
    (response) => {
        console.log('来到了response拦截success中')
        return response.data
    },
    (err) => {
        console.log('来到了response拦截failure中')
        console.log(err)
        if (err && err.response) {
            switch (err.response.status) {
                case 400:
                    err.message = '请求错误'
                    break
                case 401:
                    err.message = '未授权的访问'
                    break
                case 403:
                    err.message = '拒绝访问(403)'
                    break
                case 404:
                    err.message = '请求地址出错(404)'
                    break
                case 500:
                    err.message = '服务器错误(500)'
                    break
            }
            if (err.response.status < 200 || err.response.status > 300) {
                err.message = '请求失败'
            }
        }
        return Promise.reject(err);
    }
)

export {service}

开发环境和生产环境接口地址配置

开发环境指的是我们的项目处在开发阶段时候的环境，生产环境指的是我们项目已经部署到服务器，即将上线或者已经上线的环境。这两种环境下相应的接口接口地址是不同的，我们一般会在 .env.development 这个文件中配置开发环境，在 .env.production 这个文件中配置生产环境。

VUE_APP_BASE_API  = 'http://xxxxxx:xxxx/'
VUE_APP_WS_API = 'ws://xxxxxx:xxxx/'

接口配置

配置好我们的网络拦截请求和接口地址，那么我们就可以配置接口了，我们会在api文件夹下根据页面或者模块分别创建各接口文件。
put和post方法写法相同，get和delete方法写法相同。具体写法根据项目切实需求，此处仅为参考模板。

import request from '@/utils/request';

export function xxx(data) {
    return request({
        url: 'api/xxxx/xxxx',
        method: 'post',
        data
    });
}

export function xxx(data) {
    return request({
        url: 'api/xxxx/xxxx' + data,
        method: 'get'
    });
}

路由配置

做完网络相关的配置，就可以对路由进行配置了。这里提供两种配置方案，第二种是对第一种的简单封装。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/xxx',
        name: 'xxx',
        component: () =>
            import ('../xxx/xxxx/xxxx.vue'),
        meta: {
            title: 'xxx',
            keepAlive: true
        }
    },
]
const router = new VueRouter({
    mode: 'hash',
    base: '/xxx/',
    routes
})

// 路由守卫
router.beforeEach(async(to, from, next) => {
    next();
})
export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
function route(path, file, name, children, keepAlive) {
    return {
        exact: true, //是否为严格模式 默认true
        path,
        name,
        children,
        component: () =>
            import ('@/views' + file),
        meta: {
            title: "xxx",
            keepAlive: keepAlive,
            fromURL: "",
        }
    }
}
const routes = [
        //路由配置
        route("/", "/xxx/xxx", "xxx", "", true),
        route("/xxx", "/xxx", "xxx")
]

const router = new VueRouter({
    mode: 'hash',
    base: '/xxx/',
    routes
})

// 路由守卫
router.beforeEach(async(to, from, next) => {
    next();
})
export default router

全局状态管理

全局状态管理vuex，项目初期环境搭建我们可以简单的对它初始化一下就好。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {}
})

到此，我们对整个项目的基本环境配置已经完成了。当然，前端vue环境搭建的方式有很多，这里的项目环境搭建仅供参考，如果有什么问题，欢迎大家提出指正。