持续上期我的项目搭建，这期次要是配置环境变量、element-plus援用、跨域设置，整体布局等
一、环境变量
在理论开发中，开发环境和测试环境、生产环境所应用的域名不同，每次批改url比拟麻烦，依据不同环境配置不同环境变量，能够无效解决此类问题。

1、在根目录创立.env.development和.env.production开发和生产环境，在文件中配置url，如下

VITE_API_BASEURL = https://xxx.com/api/admin

2、TypeScript 的智能提醒:

在根目录下找到env.d.ts文件，有的装置的vite版本没有这个文件，则本人创立一个，文件中配置如下:

3、应用

在封装axios接口申请文件中，找到axios.create下baseURL,配置如下：

留神：如果我的项目中须要新增一个测试环境，则须要进行如下配置：

vite build --mode test

而后在根目录下新建.env.test文件，在此文件中配置测试环境的域名就OK了。

二、跨域
1、配置
在vite.config.ts文件中配置跨域。

server: {    proxy: {      // 选项写法      '/admin': {        target: 'https://xxx.com/api', // 代理指标地址        changeOrigin: true, // 兼容基于名字的虚拟主机,true 代理服务会把origin批改未指标地址        rewrite: (path) => path.replace(/^\/api/, '') // 门路重写      }    }  }

留神：
比如说接口是:https://xxx.com/api/admin/user,https://xxx.com/api/admin/login等的时候，咱们能够应用/admin去配置，将指标地址改成https://xxx.com/api，这样接口申请的残缺地址就会变成https://xxx.com/api/admin,而后页面中的申请门路只有拼接上/user就ok了。

三、element-plus应用

1、装置

npm install element-plus --save

2、援用
个别援用是间接在main.ts中引入就能够全局应用了，然而这里举荐大家应用插件的形式进行援用，具体操作如下：
在src新建plugins/element-plus.ts文件

而后在main.ts中引入即可

import elementPlus from './plugins/element-plus'createApp(App).use(router).use(store).use(elementPlus).mount('#app')

四、布局

1、在src目录下创立layout文件，文件夹下新建AppLayout.vue，内容如下。

<template>  <div class="common-layout">    <el-container>      <el-aside width="200px">        Aside      </el-aside>      <el-container>        <el-header>Header</el-header>        <el-main>          <router-view />        </el-main>      </el-container>    </el-container>  </div></template><script lang="ts" setup></script><style scoped lang="scss">.el-header {    background: #b3c0d1;    color: #333;}.el-aside {    background: #d3dce6;    color: #333;}.el-main {    background: #e9eef3;    color: #333;}.el-container {    height: 100vh;}</style>

留神：页面布局高度要撑起来，之前的解决形式是给html、body、#app设置height:100%,在这块间接给el-container设置height:100vh，能够达到同样的成果。

2、路由批改

layout做为布局页面，所以在router中要批改页面

import AppLayout from '@/layout/AppLayout.vue'const routes: RouteRecordRaw[] = [  {    path: '/',    component: AppLayout,    children: [      {        path: '',        name: 'home',        component: () => import('../views/home/index.vue')      }    ]  },  {    path: '/login',    name: 'login',    component: () => import('../views/login/index.vue')  }]

成果如下：

好了，下期咱们说下左侧导航栏布局以及路由配置、面包屑导航、全屏切换、页面布局、登录流程等。