vue3+vite+ts+element-plus搭建项目(三)

继续上期项目搭建，这期主要是配置环境变量、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，内容如下。

注意：页面布局高度要撑起来，之前的处理方式是给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')
  }
]

效果如下：

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