Vue项目模板 - 模式和环境变量

前言

上几篇文章没有注意到项目目录结构截图显示出来。相信各位都知道vue的脚手架都有个模式和环境变量配置。所以这篇文章作用不大。其实本文是记录自己学习模式和环境的过程。环境变量与模式 | Vite中文网 (vitejs.cn)

创建环境相关文件

创建开发环境文件

在项目根目录下创建.env.development文件

ENV = 'development'

#base api , 本api是node社区的api
VITE_APP_BASE_API = 'https://cnodejs.org/api/v1'

VITE_APP_TITLE = vue项目模板（开发环境）

.env.development文件会在npm run dev中加载，所以对应的是开发环境的变量。

创建生产环境文件

在项目根目录下创建.env.development文件

ENV = 'production'

#base api
VITE_APP_BASE_API = 'http://www.production.com'

VITE_APP_TITLE = vue项目模板（生产环境）

.env.development文件会在npm run build中加载，所以对应的是生产环境的变量。

设置一个请求测试

创建api文件夹

在项目src目录下创建api文件夹，在api文件夹下创建base.js文件和home文件夹，home文件夹下创建index.js文件（放置首页调用到的api）

base.js文件

//base.js

const baseUrl = import.meta.env.VITE_APP_BASE_API;
export default baseUrl;

index.js

//index.js
import base from '../base';//基础url
import axios from '../../request/http';//引入封装的axios

export function getData(params) {
    return axios.get(`${base}/topics`, { params })
}

index.js的文件引入了axios，这里省略安装步骤。安装axios后可以直接将 import axios from '../../request/http';//引入封装的axios替换为import axios from 'axios';即可使用。

在HelloWorld.vue文件中调用

<template>
  <h1>
    {{ msg }}
    <span>哈哈哈</span>
  </h1>

  <el-button>element</el-button>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
import { getData } from "../api/home";
const env = import.meta.env;
export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      required: false,
    },
  },
  setup: () => {
    const count = ref(0);
    /*****************调用api******************* */
    getData({
      page: 1,
      tab: "ask",
      limit: 10,
      mdrender: false,
    }).then((res:object) => {
      console.log(res, 988888);
    });
    /******************调用api****************** */
    return { count };
  },
});
</script>

<style scoped lang="less">
h1 {
  color: red;

  span {
    color: #333;
  }
}
</style>

执行npm run dev

请求成功，.env.development文件的变量成功调用。

Vue项目模板 - 环境变量