关于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')
  }
]

成果如下：

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