FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现
FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍
FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
FLASK+VUE–前后端分离（四）- VUE+Element-UI简单搭建主页布局
FLASK+VUE–前后端分离（五）- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列

🔥主流大模型集聚地 + 免梯子 + 白玩GPT4 mini + AI工作流 = 能用AI

🔥传送门：https://www.nyai.chat/chat?invite=nyai_1141439

一、VUE测试/线上/开发环境配置

npm run serve 本地环境
npm run test 测试环境
npm run build 线上环境

1、创建目录：

view文件夹–> config文件夹 --> 创建axios.js文件（配置环境切换）
在项目根目录下创建 .env 文件（配置线上环境）
在项目根目录下创建 .env.test 文件（配置测试环境）

2、配置逻辑

（1）在axios.js文件内配置逻辑

import axios from 'axios'

// if判断生产环境和开发环境
if (process.env.NODE_ENV === 'production') {
  // if，根据.env文件中的process.env.VUE_APP_BASE_URL判断是生产环境还是测试环境
  if (process.env.VUE_APP_BASE_URL === 'build') {
    //production 生产环境
    axios.defaults.baseURL = 'http://192.168.24.145:8090/';
  } else {
    //test 测试环境
    axios.defaults.baseURL = 'http://127.0.0.1:8090/';
  }
} else {
  //serve 开发环境
  axios.defaults.baseURL = 'http://127.0.0.1:8090/';
}

（2）在.env 文件内编写线上环境配置

环境变量的意思：NODE_ENV = ‘production’
在配置文件中必须以 VUE_APP_ 开头的变量，才会被嵌入到客户端中

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'build'

（3）在.env.test 文件内编写测试环境配置

打包测试环境：outputDir = test

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'test'
outputDir = test

（4）修改package.json文件源码

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test"
  },

（5）在main.js内引用配置好的axios.js文件

这样我们重新启动就可以生效了

二、拦截器

拦截器分两种：请求拦截器和响应拦截器
模板语法，我一般也是放在axios.js里面进行封装。用法就是在请求后我们会拦截这个请求，比如提前处理cookie等操作。

import axios from 'axios'
 
// 配置默认的host,假如你的API host是：http://127.0.0.1:8090/
axios.defaults.baseURL = 'http://127.0.0.1:8090/'   
 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

下面是我简单写的代码，对token进行拦截处理

三、全局导航守卫

vue-Router官方文档：https://router.vuejs.org/zh/installation.html

1、在VUE里面导航守卫有三种：

1、全局前置守卫 router.beforeEach

2、全局后置钩子 router.afterEach

3、路由独享守卫 beforeEnter

官方文档是我们学习的主要教师，详细请看官方文档。

2、在这里我们只讲全局守卫

全局守卫：当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的。任何路由跳转都会触发

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  // ...
})

每个守卫都有三个参数：

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。这是一个方法，它接受参数。这个方法必须调用要不就跳不过去，你可以把它看做一个守卫。必须给它打个招呼，要不然不让你过。

next（） 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。大白话：这就是告诉保安我要过去，去哪里呢？ 就是to了。

next（false） 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。大白话：如果传入false。就不让过了。也就是中断跳转。

next(‘/’) 或者 next({ path: ‘/’ }) 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

3、简单的实例

具体编写在Router.js文件内

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

Vue.use(VueRouter)

// 关键字: let 和 const。
// let 声明的变量只在 let 命令所在的代码块内有效。
// const 声明一个只读的常量，一旦声明，常量的值就不能改变。
// new的作用是通过构造函数来创建一个实例对象。

// 创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数
const router = new VueRouter({
  routes: [
    {
      path: '/login',  // 路径
      // component是指组件  import引用login.vue地址
      component: ()=>import('../web/login/Login.vue')
    },
    {
      path: '/home',  // 路径
      component: ()=>import('../web/home/Home.vue'),
      // children子路由，子路由是不需要待/的，路径是/home/user_info
      children: [
        {
          path: 'user_info',
          component: ()=>import('../web/user/UserInfo.vue')
        },
      ]
    },
  ]
})

import Cookies from 'js-cookie'

router.beforeEach((to, form, next) => {
  // 进入的路径是根目录
  if (to.path == '/login') {
    // 那么就跳转到下一个路径
    next()
  } else {
    // 如果不是根目录，获取token然后进行判断
    const token = Cookies.get('token')
    console.log("1")
    if (!token) {
      // if过假的就跳转到根目录
      next('/login')
    } else {
      // 否则正常跳转到下一个目录
      next()
    }
  }
})


export default router

四、基础配置

在第二章节让大家创建了一个配置文件：vue.config.js
我们在这里简单介绍一下配置文件的作用

// module.exports 返回的是模块对象本身，返回的是一个类
module.exports = {
  devServer: {
  	// devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
    disableHostCheck: false,
    host: "0.0.0.0",
    port: 8091,
    // 是否配置https
    https: false,
    // hotOnly: false 如果编译报错，你再改成正确的，重新编译，浏览器会刷新
    hotOnly: false,
    // 代理
    proxy: null
  },
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
    },
  },
  // 关闭语法检查
  lintOnSave: false,
  // 配置build
  publicPath: "./",
  /* # # 输出文件目录--默认dist */ 
  outputDir: "dist",
  /* # # 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。*/
  assetsDir: "static",
  /* # # 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。*/
  indexPath: "index.html",
  // 打包提示文件体积过大导致，进行配置
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...
      config.mode = 'production';
      config["performance"] = {//打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
      }
    }
  }
}

五、获取设置cookie、session等简单系列

1、Window属性sessionStorage

设置session（key,value）形式

sessionStorage.setItem("key", value)

获取session

sessionStorage.getItem('key')

删除session

sessionStorage.removeItem("key");

删除所有session

sessionStorage.clear();

2、Cookies

安装插件

npm install js-cookie --save

设置Cookies（key,value）形式

import Cookies from 'js-cookie'
Cookies.set('Cookies', value)

获取Cookies

import Cookies from 'js-cookie'
Cookies.get('Cookies')

删除Cookies

import Cookies from 'js-cookie'
Cookies.remove('Cookies')