关于sass:vue3vitetselementplus搭建项目三

持续上期我的项目搭建，这期次要是配置环境变量、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')
  }
]

成果如下：

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