从零搭建一个django项目-13-多环境变量配置

• 每次启动serve或者buil需要配置不同的调后台地址，这里我们可以选择使用Vue中环境变量。

1. 在项目根目录下新建或修改以下文件：.env.xxx development模式用于 vue-cli-service serve production模式用于 vue-cli-service build

这里新建的两个默认的文件分别对应调试和打包 也可以自定义一个

• 使用命令 npm run local执行读取local环境
• 新建一个config文件夹存放配置：

• 在index.js文件下：

代码语言：javascript复制

// 根据环境引入不同配置 process.env.NODE_ENVconsole.log('载入环境')console.log(process.env.NODE_ENV)const config = require('./env.'   process.env.NODE_ENV);module.exports = config;

• 运行命令npm run local

• 看一下控制台，获取到了local环境

• 现在看下环境js都配置了什么：

代码语言：javascript复制

// 本地环境配置module.exports = {  baseUrl: 'http://localhost:8080', // 项目地址
  baseApi: 'http://127.0.0.1:8000/' // 本地api请求地址}

• 不到环境请求的地址不同main.js中引用配置,将axios默认的基础url通过config取

代码语言：javascript复制

import config from './config/index'import axios from 'axios'axios.defaults.baseURL = config.baseApi

• 请求看看

• 修改以后再请求：

• 使用的是修改后的配置，证明是读取的配置请求。
• 扩展一下怎么使用全局变量：
• vue3使用app.config.globalProperties

• 取变量使用this.$

• 现在我们就不用每次启动serve或者buil修改请求地址了。
• 修改一个bug，使用buil打包起环境时候谷歌浏览器删除cookies时候没删掉。
• quit函数改成这样，先赋值个空再删除，双重保证下。

• 登录状态判断修改

• 登录状态判断修改

• 我这个方法感觉挺野蛮的，各位前端大佬有方法可以联系我~

npm vue.js 打包 javascript

0 人点赞