vite 开发小结 打包配置 封装 axios 引入ELE

 # npm 6.x

npm init @vitejs/app newbee-admin --template vue

# npm 7+,

npm init @vitejs/app newbee-admin -- --template vue

# yarn

yarn create @vitejs/app newbee-admin --template vue

npm i vue-router@next

在 vite.config.js 下添加 resolve.alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
  }
})

安装成功之后，在 src 目录下新建 router/index.js，并添加路由配置项

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Index from '@/views/Index.vue'

const router = createRouter({
  history: createWebHashHistory(), // hash 模式
  routes: [
    {
      path: '/',
      component: Index
    }
  ]
})

export default router

在 src 目录下新增 views 目录 Index.vue 

<template>
  Index
</template>

<script setup>
export default {

}
</script>

配置完之后，我们需要在 src/main.js 中引入路由实例

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

createApp(App).use(router).mount('#app')

修改 src/App.vue

<script setup>

</script>

<template>
<router-view></router-view>

</template>

<style>

</style>

打包配置 vite.config.js

静态资源前缀变成了我们配置好的 //s.baidu.com/beta/xxx，同理运行 npm run build:release 也会变成相应的前缀。

直接修改 base 属性为 ./ 即可

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.vue', '.js', 'jsx', '.json']
  },
  base: mode == 'development' ? './' : (mode == 'beta' ? '//s.baidu.com/beta/xxx' : '//s.baidu.com/release/xxx') // 静态资源路径配置
})

运行 npm run dev

打包 npm run build:beta

打包时做的配置  获取环境变量  import.meta.env

Vite 专门为项目提供的环境变量参数，通过它能获取到我们在 scripts 设置的 mode 环境变量

<template>
  <div>Index</div>
</template>

<script>
const ENV = import.meta.env
export default {
  name: 'Index',
  setup() {
    console.log('ENV', ENV)
  }
}
</script>

封装 axios 

安装 ：npm i axios

新建utils/axios.js

import axios from "axios";
import router from "../router";
import config from '~/config'
// 在只需要配置单个或有限明确的接口域名时可以直接设置，
//在生产环境和开发环境切换时需手动更改
axios.defaults.baseURL = config[import.meta.env.MODE].baseURL
 携带 cookie，对目前的项目没有什么作用，因为我们是 token 鉴权
//这一条要求在请求头里带上cookie如果前端配置了这个withCredentials=true，
//后段设置Access-Control-Allow-Origin不能为 " * ",必须是你的源地址
axios.defaults.withCredentials = true
//请求头，headers信息
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
//默认post请求,使用使用 application/json 形式
//1,需要进行序列化转换
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//2..直接提交json格式不用使用qs进行序列化转换 （后端也要修改为接收json格式）
// Request Payload方式 (不用QS转)
//axios.defaults.headers.post['Content-Type']='application/json';
axios.defaults.headers.post['Content-Type'] = 'application/json'

//求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(
    res => {
        if (typeof res.data !== 'object') {
            alert('服务端异常')
            return Promise.reject(res)
        }
        if (res.data.resultCode != 200) {
            if (res.data.message) alert(res.data.message)
            if (res.data.resultCode == 419) {
                router.push({ path: '/login' })
            }
            return res.data.data
        }
        return res.data.data
    })

    export default axios

新增 config/index.js

//开发环境配置 /api，是为了后续配置 proxy 代理接口所用，

// config/index.js
export default {
  development: {
    baseUrl: '/api' // 开发代理地址
  },
  beta: {
    baseUrl: '域名' // 测试接口域名
  },
  release: {
    baseUrl: '域名' // 正式接口域名
  }
}

配置 proxy 代理接口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vitePluginImport from 'vite-plugin-babel-import'

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  plugins: [
    vue(),
    vitePluginImport([
      {
        libraryName: 'element-plus',
        libraryDirectory: 'es'
      }
    ])
  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
  },
  base: './',
  server: {
    proxy: {
      '/api': {
        target: '映射域名', // 凡是遇到 /api 路径的请求，都映射到 target 属性
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 重写 api 为 空，就是去掉它
      }
    }
  }
})

引入 UI 组件库 element-plus

npm i element-plus@1.0.2-beta.28

不希望全局引入  npm i vite-plugin-babel-import -D  它能实现 element-plus 的按需引入

//配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vuePluginImport from 'vite-plugin-babel-impor'

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  plugins: [
    vue(),
    vuePluginImport(
      [
        {
          libraryName: 'element-plus',
          libraryDirectory: 'es'
        }
      ]
    )


  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.vue', '.js', 'jsx', '.json']
  },
  base: './', // 静态资源路径配置
  server: {
    proxy: {
      '/api': {
        target: '', // 凡是遇到 /api 路径的请求，都映射到 target 属性
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 重写 api 为 空，就是去掉它
      }
    }
  }
})

修改 src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { ElButton } from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';

createApp(App).use(router).use(ElButton).mount('#app')