vite配置文件语法提示及环境区分

1.vite配置文件语法提示

1. webstorm 有自动提示
2. vscode特殊处理

第一种：引用defineConfig函数

// 引入defineConfig
import { defineConfig } from "vite";
export default defineConfig({
  optimizeDeps: {
    exclude: ["lodash-es"], // 不进行依赖预构建
  },
});

第二种：使用注解

/** @type import("vite").UserConfig */
const viteConfig = {
  optimizeDeps: {
    exclude: ["lodash-es"], // 不进行依赖预构建
  },
};
// 官方推荐
/** @type import("vite").UserConfig */
export default {
  optimizeDeps: {
    exclude: ["lodash-es"], // 不进行依赖预构建
  },
};

说明:正常函数有无返回值

/**
 * @params 
 * @return string
 */
function foo() {
	return 'x'
}
// 使用时会进行类型的提示，都是string的方法
foo().

2.打包配置环境区分

区分环境的配置文件，

webpack：

• webpack.dev.config
• webpack.prod.config
• webpack.base.config
• webpackmerge

vite:

├─package.json
├─vite.base.config.js
├─vite.config.js
├─vite.dev.config.js
├─vite.prod.config.js

package.json

"scripts": {
    "dev": "vite",
    "build": "vite build"
  },

vite.base/prod/dev.config.js 暂时写

import { defineConfig } from "vite";

export default defineConfig({});

vite.config.js

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

// 使用函数可以打印日志
const envResolver = {
  build: () => {
    console.log("生产环境");
    return { ...viteBaseConfig, ...viteProdConfig };
  },
  serve: () => {
    console.log("开发环境");
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};
// command : serve | build
export default defineConfig(({ command }) => {
  console.log(command);
  return envResolver[command]();
});