vue/ts 新建项目时好用的配置 vite.config.tstsconfig.json
Posted 派大星⊙∫⊙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue/ts 新建项目时好用的配置 vite.config.tstsconfig.json相关的知识,希望对你有一定的参考价值。
创建完项目后的基础配置
用vite创建初始vue项目后,会生成一个默认的vite.config.ts文件
创建完的内容
import defineConfig from \'vite\'
import vue from \'@vitejs/plugin-vue\'
export default defineConfig(
plugins: [vue()]
)
重点来了 vite.config.ts 建议放的内容(含注释)
import fileURLToPath, URL from \'node:url\'
// 使用 defineConfig 帮手函数,这样不用 jsdoc 注解也可以获取类型提示
import defineConfig from \'vite\'
import vue from \'@vitejs/plugin-vue\'
import vueJsx from \'@vitejs/plugin-vue-jsx\'
// 此处引用了path路径导向
import path from "path"
export default defineConfig(
// 查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html
plugins: [vue(), vueJsx()],
// 在生产中服务时的基本路径
base: \'./\',
// 配置别名绝对路径 https://webpack.js.org/configuration/resolve/
resolve:
// resolve.alias: 更轻松地为import或require某些模块创建别名
alias:
// \'@\': fileURLToPath(new URL(\'./src\', import.meta.url)),
// 如果报错__dirname找不到,需要安装node,执行npm install @types/node --save-dev
"@": path.resolve(__dirname, "./src"),
"@assets": path.resolve(__dirname, "./src/assets"),
"@components": path.resolve(__dirname, "./src/components"),
"@views": path.resolve(__dirname, "./src/views"),
"@store": path.resolve(__dirname, "./src/stores"),
,
// 与根相关的目录,构建输出将放在其中,如果目录存在,它将在构建之前被删除
// @default \'dist\'
build:
outDir: "dist",
,
server:
https: false, // 是否开启 https
open: true, // 是否自动在浏览器中打开
port: 8001, // 端口号
host: "0.0.0.0",
// 跨域代理
proxy:
\'/api\':
target: "http://localhost:3000", // 后台接口
changeOrigin: true,
// secure: false, // 如果是https接口,需要配置这个参数
// ws: true, //websocket支持
// 截取api,并用api代替
// rewrite: (path) => path.replace(/^\\/api/, "/api"),
,
// 引入第三方的配置
optimizeDeps:
include: [],
)
下面是 tsconfig.json
只有 "compilerOptions" 目录下面的内容
"compilerOptions":
"baseUrl": ".", // 工作根目录
"paths": // 指定模块的路径,和baseUrl有关联,和webpack中resolve.alias配置一样
"@/*": ["./src/*"],
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@views/*": ["src/views/*"],
"@store/*": ["src/stores/*"],
,
"lib": [// 编译过程中需要引入的库文件的列表
"es5",
"es2015",
"es2016",
"es2017",
"es2018",
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
// 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"node_modules",
"src/assets/json/*.json",
"src/assets/css/*.scss"
],
"allowUnreachableCode": true, // 不报告执行不到的代码错误。
"allowUnusedLabels": false, // 不报告未使用的标签错误
"alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
"experimentalDecorators": true, // 启用实验性的ES装饰器
"noImplicitAny": false, // 是否默认禁用 any
"removeComments": true, // 是否移除注释
"target": "esnext",// 编译的目标是什么版本的
"module": "esnext", // "commonjs" 指定生成哪个模块系统代码
"strict": true,
"jsx": "preserve", // 在 .tsx文件里支持JSX
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"suppressImplicitAnyIndexErrors": true,
"sourceMap": true, // 是否生成map文件
"declaration": true, // 是否自动创建类型声明文件
"declarationDir": "./lib", // 类型声明文件的输出目录
"allowJs": true, // 允许编译javascript文件。
//指定引入的类型声明文件,默认是自动引入所有声明文件,一旦指定该选项,则会禁用自动引入,改为只引入指定的类型声明文件,如果指定空数组[]则不引用任何文件
"types": [
"webpack-env",
"node"
],
,
"references": [
"path": "./tsconfig.config.json"
]
以上是关于vue/ts 新建项目时好用的配置 vite.config.tstsconfig.json的主要内容,如果未能解决你的问题,请参考以下文章