文章目录

• 1. vite.config.js文件相关配置
• 2. 路径别名
• 3. mock数据配置

1. vite.config.js文件相关配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({// 插件，vue就是以插件的方式集成到vite工具中plugins: [vue(), vueJsx({// 默认只对扩展名为 .jsx/.tsx 进行babel解析// 需要需要它解析.vue扩展名下面的jsx// include: /\.[jt]sx/// include: /\.[jt]sx|vue/})],// 添加别名resolve: {alias: {'@': path.resolve('src')}},server: {// 配置端口port: 8080,// 自动打开浏览器open: false,// 通过配置开发时，代理服务器，在开发时进行跨域解决proxy: {'/api': {target: 'https://api.iynn.cn/film',// 改变请求头源地址changeOrigin: true,// 重写，如果目标地址中存在 /api，就将 /api 替换为空字符串// rewrite: path => path.replace(/^\/api/, '')// rewrite: path => { }}}}
})

上面已经完成了跨域相关的配置，现在我们来试着发起网络请求。

父组件：

子组件：

除了上面的配置方法以外，我们还可以将网络配置添加到开发环境中，就像下面这样：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'// export default defineConfig((command, mode, ssrBuild) => {
export default defineConfig(({ mode }) => {let config = {plugins: [vue(), vueJsx()],// 添加别名resolve: {alias: {'@': path.resolve('src')}}}// 开发环境中添加网络代理if ('development' === mode) {// 开发环境config = {...config,server: {// 配置端口port: 8080,// 自动打开浏览器open: false,// 通过配置开发时，代理服务器，在开发时进行跨域解决proxy: {'/api': {target: 'https://api.iynn.cn/film',changeOrigin: true}}}}}return config
})

2. 路径别名

在 vite.config.js 中配置：

import { resolve } from 'path'export default defineConfig({resolve: {alias: {'@': resolve('src')}}
})

在 jsconfig.json 或 tsconfig.json 中配置：

{ "compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules", "dist"]
}

3. mock数据配置

安装：

yarn add vite-plugin-mock mockjs -D

在 vite.config.js 中配置：

import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(), viteMockServe({})],
})

在项目根目录下面创建目录 mock，创建文件 mock/index.js：

import Mockjs from 'mockjs'const mockData = [{url: '/api/films',method: 'get',response: ({ query }) => {const data = Mockjs.mock({'films|10': [{"filmId|+1": 1,'name': '@cname'}]})return {code: 0,msg: 'ok',data}}}
]export default mockData

App.vue：