# 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')