vite

config

vue.config.ts 配置说明

// 为配置定义的 ts 
import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";
// console.log(path.resolve(__dirname, "../src/components"));
// exit(1);
// https://vitejs.dev/config/
const config = defineConfig({
// ---------- shared options start
// html 静态页面目录
root: "./",
// url 路径 default /
base: "/",
// mode:
'development' for serve, 'production' for build
mode: "development",
publicDir: "build",
// 获取全局变量,改变变量的名字
// define: {
//
publicPath: "qiphon",
// },
// 路径别名
resolve: {
alias: {
"@": path.resolve(__dirname, "../src"),
"@components": path.resolve(__dirname, "../src/components"),
},
},
css: {
modules: {
scopeBehaviour: "local",
},
// postcss.config.js same
// postcss: {},
},
//
json: {
// Whether to support named imports from .json files.
// namedExports: true
// json 文件是否以 字符串的形式引入，这种形式。这比Object形式性能要高得多，尤其是在JSON文件较大时。
// stringify:
},
// esbuild 打包的参数，主要应用于 ts、jsx、tsx，需要参考esbuild
// esbuild:{},
/**
* 可以让资源不被 plugin （没有使用 enforce: 'pre' 的） 处理
* https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts
*/
// assetsInclude:
logLevel: "info",
clearScreen: false,
plugins: [reactRefresh()],
// -------------------- Server Options start
server: {
host: "qiphon.com",
port: 3001,
// when true，if port in use will exit
strictPort: false,
// Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.
// The value can also be an options object passed to https.createServer().
// https: string | obj
// open broswer
// open: false,
// request proxy for development
// proxy: {
//
// string shorthand
//
"/foo": "http://localhost:4567/foo",
//
// with options
//
"/api": {
//
target: "http://jsonplaceholder.typicode.com",
//
changeOrigin: true,
//
rewrite: (path) => path.replace(/^/api/, ""),
//
},
//
// with RegEx
//
"^/fallback/.*": {
//
target: "http://jsonplaceholder.typicode.com",
//
changeOrigin: true,
//
rewrite: (path) => path.replace(/^/fallback/, ""),
//
},
// },
// cors: // 跨域配置项，默认允许任何源
force: true, // Set to true to force dependency pre-bundling.
// hmr:
// https://github.com/paulmillr/chokidar#api
// watch:
},
// --------------------- build options start ---------------
build: {
/**
* * Default: 'modules' - Similar to `@babel/preset-env`'s targets.esmodules,
* transpile targeting browsers that natively support es module imports. Also
* injects a light-weight dynamic import polyfill.
* https://caniuse.com/es6-module
*
* esnext 会以最小化程度进行编译，谨慎使用
* * Another special value is 'esnext' - which only performs minimal trasnpiling
* (for minification compat) and assumes native dynamic imports support.
*/
// target: ""
// Default: true unless build.target is 'esnext' , will inject import 'vite/dynamic-import-polyfill' to html
polyfillDynamicImport: true,
// 打包后的文件路径
outDir: "build",
// By default, Vite will empty the outDir on build if it is inside project root. 删除之前的打包文件
emptyOutDir: true,
// 静态资源路径
// assetsDir: string
/**
* Imported or referenced assets that are smaller than this threshold will be inlined as base64 URLs to avoid extra http requests. Set to 0 to disable inlining altogether.
* 静态资源小于多少时使用base64 形式内联写入
* */
assetsInlineLimit: 8 * 1024,
/**
* false：所有的 css 会被打包到一个css文件中
* true：css样式文件会拆分到各个异步chunk 中
*/
cssCodeSplit: true,
sourcemap: true,
// https://rollupjs.org/guide/en/#big-list-of-options
// rollupOptions:
// Options to pass on to @rollup/plugin-commonjs.
https://github.com/rollup/plugins/tree/master/packages/commonjs
// commonjsOptions:
//
// lib:
// When set to true, the build will also generate a manifest.json
manifest: true,
minify: false,
// Additional minify options to pass on to Terser.
// terserOptions:
// Constructor options to pass on to clean-css.
https://github.com/jakubpawlowicz/clean-css#constructor-options
// cleanCssOptions:
//
// write:
// 是否启用 brotli 压缩，IE 不支持
brotliSize: false,
// chunk 超大警告显示
chunkSizeWarningLimit: 300,
},
// -----------------
Dep Optimization Options
Related: Dependency Pre-Bundling
optimizeDeps: {
// 以指定依赖作为入口
// entries:
// 不参与 pre-build 的文件
// exclude:
// include:
},
// ---------- SSR Options in minor releases
});
console.log("building mode : " + config.mode);
export default config;

最后

以上就是可爱小鸽子为你收集整理的vite 2vite的全部内容，希望文章能够帮你解决vite 2vite所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。