从新回归Vue之3.0(六):配置vite.config.ts,tsconfig.json
一, 配置vite.config.ts
可以先将l以下几行代码注释
import { loadEnv } from "vite";
port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
additionalData: '@import "@/assets/styles/global.scss";',
loadEnv和scss将在后面配置,port可以自己先随便给一个
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { loadEnv } from "vite";
// nodejs写法,获取项目目录
import path from "path";
// https://vitejs.dev/config/
export default ({ command, mode }) => {
return defineConfig({
plugins: [vue()],
//服务器配置
server: {
host: "127.0.0.1",
port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
strictPort: true, // 端口被占用直接退出
https: false,
open: false, // 在开发服务器启动时自动在浏览器中打开应用程序
//代理配置
proxy: {
"/api": {
target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
hmr: {
overlay: false, // 屏蔽服务器报错
},
},
resolve: {
//设置项目文件导入路径
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
css: {
// css预处理器
preprocessorOptions: {
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
// 给导入的路径最后加上 ;
scss: {
additionalData: '@import "@/assets/styles/global.scss";',
},
},
},
build: {
chunkSizeWarningLimit: 1500, // 分块打包,分解块,将大块分解成更小的块
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
},
},
},
},
});
};
二,tsconfig.json
在compilerOptions里增加
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
}