export default defineConfig({
server: {
// https: true,// 启用https协议,默认是HTTP协议
host: true, // 监听所有地址
port: 1314,// 前端项目启动的端口号
open: true,// 开启代理
cors: false, // 为开发服务器配置 CORS
proxy: {
'^/api': {
target: '',// 服务器地址
changeOrigin: true,// 开启代理
ws: true, // 开启 websockets 代理
rewrite: (path) => path.replace(/^\/api/, '')// 请求接口重写
}
}
}
})
参考链接 :https://blog.csdn.net/fmoment/article/details/132128836
问题1
解决方式: 首先安装 npm install --save-dev @types/node
在vite.config.ts里面增加
import path from 'path'
问题2:
解决
下载 npm i @vitejs/plugin-vue
在 vite.config.js
加入 import vue from '@vitejs/plugin-vue'
和plugins: [vue()],
import type { UserConfig, ConfigEnv } from 'vite'
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
// const root = process.cwd()
// 加载环境变量
// const env = loadEnv(mode, root, '')
// const { VUE_APP_BASE_API, VUE_APP_BASE_URL } = env
return {
resolve: {
alias: {// 配置全局相对路径
'@': path.resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
scss: {// 导入scss的全局默认配置
additionalData: '@import "@/assets/scss/index.scss";'
}
}
},
plugins: [vue()],
server: {
// https: true,// 启用https协议,默认是HTTP协议
host: true, // 监听所有地址
port: 1314,// 前端项目启动的端口号
open: true,// 开启代理
cors: false, // 为开发服务器配置 CORS
proxy: {
'^/api': {
target: '',// 服务器地址
changeOrigin: true,// 开启代理
ws: true, // 开启 websockets 代理
rewrite: (path) => path.replace(/^\/api/, '')// 请求接口重写
}
}
}
}
})
--------------------------------------2024.05.13更新---------------------------------------
问题3:
vue+ts+vite 新建项目出现:找不到模块 "@/views/home/home.vue"
问题
解决办法:
在根目录下创建一个 env.d.ts
文件,里面写入以下代码:
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}