上一节 - 搭建vue3+typescript+vite+yarn项目
前言：
在vue2里，我们使用webpack打包工具，一些基本配置我们都是熟悉不能再熟悉，但在vite里，有什么不同呢？
参考链接 - vite 中文文档
一、配置文件
vue2里，针对webpack的配置，是基于vue.config.js文件
但在基于vite的vue3里，配置文件是vite.config.js
我构建的是ts版本的vue3项目，那么我的配置文件就是vite.config.ts
而且该文件项目创建的时候已经默认生成了
新创建的项目配置文件，仅仅配置vue的支持，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
vue是以插件形式配置到vite里的
defineConfig接受一个对象，它的每个属性对应文档里的配置项
二、配置反向代理
配置反向代理，利用server配置项
server: {
watch: {
usePolling: true
},
port: 3002,
host: '0.0.0.0',
hmr: {overlay: false},
strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
proxy: {
// 字符串简写写法
// [key]: `${import.meta.env.VITE_APP_BASE_SERVER}`,
// 选项写法
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
// },
[config.VITE_API_BASE_URL]: {
target: config.VITE_APP_BASE_SERVER,
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
// '^/fallback/.*': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/fallback/, '')
// },
// 使用 proxy 实例
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// configure: (proxy, options) => {
// // proxy 是 'http-proxy' 的实例
// // console.log(proxy, options)
// }
// }
}
},
配置项一目了然，跟vue2的vue.config.js的配置大同小异
这里主要说明下，我proxy里的config
[config.VITE_API_BASE_URL]: {
target: config.VITE_APP_BASE_SERVER,
changeOrigin: true,
},
config变量来源于全局变量
// loadEnv函数可以读取文件里的环境变量
import { defineConfig, loadEnv } from 'vite'
const config = loadEnv('development', './')
console.log('查看环境变量', config)
image.png
这需要在根目录下创建两个命名为：.env.development、.env.production的文件
编写相关的变量：
NODE_ENV = 'development'
# .env.development
# base api
VITE_API_BASE_URL = '/jeecg-boot'
VITE_APP_BASE_SERVER = 'http://192.....:8080'
三、配置路径别名
vue2中使用习惯了开箱即用的路径别名，但在vue3的ts项目里，如果直接使用，是会报错的：
import FullScreen from '@/components/Fullscreen/index.vue'
image.png
- 首先下载@types/node依赖
// npm
npm install @types/node --save-dev
// yarn
yarn add @types/node --save-dev
- 到vite.config.ts文件增加resolve.alias配置
...
const path = require('path');
export default ({mode}) => defineConfig({
...
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
}
})
这样配置后，引入组件就能正常被编译了
注意：vite配置文件改变配置后，不需要重新启动项目，就可以生效
下一节 - vue3中引入router和vuex