{ "version": "https://jsonfeed.org/version/1", "title": "Vite", "description": "\u4e0b\u4e00\u4ee3\u524d\u7aef\u5f00\u53d1\u4e0e\u6784\u5efa\u5de5\u5177", "home_page_url": "go/vite", "feed_url": "feed/vite.json", "icon": "https://cdn.v2ex.com/navatar/20d1/35f0/1112_large.png?m=1636147498", "favicon": "https://cdn.v2ex.com/navatar/20d1/35f0/1112_normal.png?m=1636147498", "items": [ { "author": { "url": "member/Danswerme", "name": "Danswerme", "avatar": "https://cdn.v2ex.com/avatar/7460/e1cd/274090_large.png?m=1765551963" }, "url": "t/1102050", "title": "vite \u901a\u8fc7\u5c40\u57df\u7f51\u6216\u8005\u7aef\u53e3\u8f6c\u53d1\u8fdb\u884c\u8bbf\u95ee\u65f6\u7279\u522b\u6162\u3002", "id": "t/1102050", "date_published": "2025-01-02T08:20:10+00:00", "content_html": "

\u6709\u65f6\u60f3\u628a\u672c\u5730\u5f00\u53d1\u4e2d\u7684\u94fe\u63a5\u53d1\u7ed9\u540c\u4e8b\uff0c\u540c\u4e8b\u901a\u8fc7\u5c40\u57df\u7f51\u8bbf\u95ee\u65f6\u6253\u5f00\u7279\u522b\u6162\uff0cDevTools \u4e2d\u53ef\u4ee5\u770b\u5230\u4e3b\u8981\u662f\u5361\u5728\u5165\u53e3\u6587\u4ef6\uff0c\u641c\u4e86\u4e00\u4e0b\u4e5f\u6709\u4eba\u63d0\u5230\u4e86\u7c7b\u4f3c\u7684\u95ee\u9898\uff1a https://www.xqy404.com/blog/2024/migrate-vite-to-rspack/ \uff0c\u4f46\u662f\u6ca1\u6709\u89e3\u51b3\u65b9\u6848\u3002

\u5927\u5bb6\u6709\u9047\u5230\u8fd9\u4e2a\u95ee\u9898\u7684\u5417\uff1f

\n" }, { "author": { "url": "member/dzdh", "name": "dzdh", "avatar": "https://cdn.v2ex.com/avatar/1683/7ebf/226307_large.png?m=1757987240" }, "url": "t/969726", "title": "vite+vue3 \u6709\u4ec0\u4e48\u63d2\u4ef6\u53ef\u4ee5\u8ba9\u7f16\u8bd1\u540e\u7684 js \u88ab\u52a0\u5bc6\u4fdd\u62a4\u5417\u3002\u7c7b\u4f3c jsjiami.com \u90a3\u6837", "id": "t/969726", "date_published": "2023-08-31T04:29:55+00:00", "content_html": "" }, { "author": { "url": "member/chenliangngng", "name": "chenliangngng", "avatar": "https://cdn.v2ex.com/gravatar/780a5460ba7bbd960d7046fa4ad1e463?s=73&d=retro" }, "url": "t/967335", "title": "vite \u6709\u4ec0\u4e48\u63d2\u4ef6\u4f1a\u628a unicode \u8f6c\u6210\u4e2d\u6587\u5417", "id": "t/967335", "date_published": "2023-08-22T04:04:26+00:00", "content_html": "\u6211\u672c\u5730 css \u4ee3\u7801\u91cc\u9762\u4e2d\u6587\u90fd\u662f\u7528 unicode \u5199\u7684\uff0c\u672c\u5730\u8c03\u8bd5\u6ca1\u95ee\u9898\u3002

\u4f46\u662f build \u4e4b\u540e unicode \u53d8\u6210\u4e86\u4e2d\u6587(\u76f4\u63a5\u770b dist \u91cc\u9762\u7684 css)\uff0c\u5bfc\u81f4\u751f\u4ea7\u73af\u5883\u5076\u53d1\u4e2d\u6587\u4e71\u7801\u3002

\u9879\u76ee\u662f vue3+vite+antdv

\u5176\u4ed6\u63d2\u4ef6
```
\"@vitejs/plugin-vue\":\"^2.3.1\",
\"@vitejs/plugin-vue-jsx\":.\"^1.3.10\",
\"vite\":\"^2.9.7\",
\"vite-babel-plugin\":\"0.0.2\",
\"vite-plugin-cesium\":\"1.2.10\",
\"vite-plugin-commonjs-externals\":\"00.1.1\",
```" }, { "author": { "url": "member/feelapi", "name": "feelapi", "avatar": "https://cdn.v2ex.com/avatar/8c06/9f21/36491_large.png?m=1425350253" }, "url": "t/965905", "title": "\u8bf7\u6559\uff1a vite + electron.js + vue.js 3 \u5f00\u53d1\u684c\u9762\u8f6f\u4ef6\uff0c\u65e0\u6cd5\u5728 renderer \u4e2d\u52a0\u8f7d C++ node module", "id": "t/965905", "date_published": "2023-08-16T13:40:48+00:00", "content_html": "

\u9996\u5148\u8fd9\u4e2a\u573a\u666f\u7279\u6b8a\uff0c\u4e0d\u5e94\u8be5\u5728 renderer \u4e2d\u4f7f\u7528 C++ node module \uff0c\u8fd9\u4e2a node \u662f\u7528\u6765\u505a\u51e0\u4f55\u8ba1\u7b97\u7684\u3002\u6280\u672f\u6808\u57fa\u4e8e electron-vite, \u5c1d\u8bd5\u4e86 vite-plugin-native \uff0c\u672a\u9042\u3002\u589e\u52a0 assetesInclude \u53ef\u4ee5\u8fc7\u6ee4 node \u6253\u5305\uff0c\u4f46\u662f\u4e0d\u80fd\u52a0\u8f7d node \u3002

\n" }, { "author": { "url": "member/qq309187341", "name": "qq309187341", "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro" }, "url": "t/931821", "title": "\u8bf7\u6559\u4e00\u4e2a vite \u4ee3\u7406\u7684\u95ee\u9898", "id": "t/931821", "date_published": "2023-04-12T02:06:53+00:00", "content_html": "\u6211\u60f3\u901a\u8fc7 vite \u4ee3\u7406\u7684\u80fd\u529b\u62e6\u622a\u67d0\u4e9b\u63a5\u53e3\u8bf7\u6c42\uff0c\u7136\u540e\u505a\u4e00\u4e9b\u5176\u4ed6\u7684\u64cd\u4f5c\uff0c\u6bd4\u5982\u672c\u5730\u6587\u4ef6\u5199\u5165\u7b49\u7b49\u3002
\u6211\u901a\u8fc7 configure \u65b9\u6cd5\u62e6\u622a\u4e86\u5bf9\u5e94\u7684\u63a5\u53e3\uff0c\u4f46\u662f\u56e0\u4e3a\u8fd9\u4e2a\u63a5\u53e3\u662f post \u8bf7\u6c42\uff0c\u6211\u8981\u5982\u4f55\u624d\u80fd\u62ff\u5230\u5176\u4e2d\u7684 body \u5185\u5bb9\uff0creq.body \u8fd4\u56de\u7684\u662f undefined \u3002\u662f\u4e0d\u662f\u9700\u8981\u4f7f\u7528 body-parser \u63d2\u4ef6\u89e3\u6790\u4e00\u4e0b\uff1f\u80fd\u4e0d\u80fd\u5199\u4e0b\u5982\u4f55\u64cd\u4f5c\uff1f

server: {
port: 9900,
proxy: {
'/root': {
target: 'http://192.168.3.216',
changeOrigin: true,
configure: (proxy, options) => {
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log(req.body)
})
}
},
},
}," }, { "author": { "url": "member/qq309187341", "name": "qq309187341", "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro" }, "url": "t/928106", "title": "\u8bf7\u95ee\u5404\u4f4d\u5927\u4f6c\u4e00\u4e2a vite \u63d2\u4ef6\u7684\u95ee\u9898", "id": "t/928106", "date_published": "2023-03-29T03:37:43+00:00", "content_html": "\u6211\u60f3\u901a\u8fc7\u63d2\u4ef6\u7684\u5f62\u5f0f\u7ed9\u9879\u76ee\u589e\u52a0\u4e00\u4e9b\u9875\u9762\u5143\u7d20\uff0c\u7136\u540e\u8fd9\u4e9b\u5143\u7d20\u662f\u901a\u8fc7 vue \u8bed\u6cd5\u4e66\u5199\u7684\u3002\u8bd5\u4e86\u4e00\u4e0b\uff0c\u7ed3\u679c\u62a5\u9519\uff0cvite \u65e0\u6cd5\u89e3\u6790 vue \u2018No loader is configured for \".vue\" files: src/index.vue\u2019\u80fd\u4e0d\u80fd\u5b9e\u73b0\uff0c\u6709\u6ca1\u6709\u6587\u6863\u53c2\u8003\u3002\u8c22\u8c22\u4e86\u3002" }, { "author": { "url": "member/jiechen257", "name": "jiechen257", "avatar": "https://cdn.v2ex.com/avatar/eb0b/64d7/615689_large.png?m=1720961584" }, "url": "t/927751", "title": "vite \u8bbe\u7f6e\u751f\u4ea7\u73af\u5883 baseURL \u4e3a /api/\uff0c\u771f\u5b9e\u8bf7\u6c42\u4f1a\u81ea\u52a8\u6dfb\u52a0\u672c\u673a ip \u5730\u5740\u5417", "id": "t/927751", "date_published": "2023-03-28T02:16:41+00:00", "content_html": "

# .env.production \u6587\u4ef6\n\n# \u7ebf\u4e0a\u73af\u5883\nNODE_ENV = \"production\"\n\n# \u7ebf\u4e0a\u73af\u5883\u63a5\u53e3\u5730\u5740(easymock)\nVITE_API_URL = \"/api/\"\n# VITE_API_URL = \"http://192.168.3.220:80/api/\"\n

// \u7528\u4e8e axios \u914d\u7f6e\nconst cOnfig= {\n\t// \u9ed8\u8ba4\u5730\u5740\u8bf7\u6c42\u5730\u5740\uff0c\u53ef\u5728 .env.*** \u6587\u4ef6\u4e2d\u4fee\u6539\n\tbaseURL: import.meta.env.VITE_API_URL as string,\n\t// \u8bbe\u7f6e\u8d85\u65f6\u65f6\u95f4\uff08 10s \uff09\n\ttimeout: ResultEnum.TIMEOUT as number,\n\t// \u8de8\u57df\u65f6\u5019\u5141\u8bb8\u643a\u5e26\u51ed\u8bc1\n\twithCredentials: true\n};\n

\u5982\u4ee3\u7801\u6240\u793a\uff0c\u6211\u6539\u4e3a /api/ \u540e\uff0c\u751f\u4ea7\u73af\u5883\u8fd8\u662f\u80fd\u6b63\u5e38\u8bbf\u95ee\u540e\u7aef\uff0c\u6211\u67e5\u4e86\u4e0b axios \u7684 baseURL \u5b57\u6bb5\u89e3\u91ca\uff0c\u662f\u660e\u786e\u8bf4\u4e86\u4e0d\u4f1a\u81ea\u5df1\u6dfb\u52a0 ip \u7684\uff0c\u6240\u4ee5\u60f3\u8bf7\u6559\u4e0b\u662f\u4ec0\u4e48\u60c5\u51b5

\n" }, { "author": { "url": "member/dominickkorey", "name": "dominickkorey", "avatar": "https://cdn.v2ex.com/avatar/decd/6a86/573155_large.png?m=1742484963" }, "url": "t/902145", "title": "Vite \u6267\u884c build \u65f6\u5982\u4f55\u80fd\u591f\u81ea\u52a8\u6dfb\u52a0\u5176\u4ed6\u6587\u4ef6\u5230 dist \u6587\u4ef6\u5939\uff1f", "id": "t/902145", "date_published": "2022-12-13T03:33:48+00:00", "content_html": "

\u641c\u7d22\u4e86\u534a\u5929\u597d\u50cf\u4e5f\u6ca1\u6709\u627e\u5230\u76f8\u5173\u7684\u9700\u6c42\uff0c\u5927\u5bb6\u5982\u679c\u6709\u77e5\u9053\u7684\u8bdd\u53ef\u4ee5\u544a\u8bc9\u6211

\n" }, { "author": { "url": "member/qq309187341", "name": "qq309187341", "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro" }, "url": "t/894497", "title": "element plus \u6309\u94ae\u7684\u95ee\u9898\uff0c\u6c42\u5e2e\u52a9", "id": "t/894497", "date_published": "2022-11-11T07:27:37+00:00", "content_html": "\u8bf7\u95ee\u5404\u4f4d\u5927\u4f6c\u3002vite2 \u4e2d\u4f7f\u7528 unplugin-icons/resolver \u8fd9\u4e2a\u63d2\u4ef6\u81ea\u52a8\u5bfc\u5165\u56fe\u6807\u3002\u6b63\u5e38\u4f7f\u7528\u6ca1\u6709\u95ee\u9898\uff0c\u4f46\u662f\u653e\u5728 button \u4e2d\u4f7f\u7528\u5c31\u663e\u793a\u4e0d\u51fa\u6765\u4e86\u3002

1:\u65e0\u6cd5\u663e\u793a
<el-button text size=\"large\" :icon=\"props.collapsed ? IExpand : IFold\" class=\"collapsed\">
</el-button>

2.\u53ef\u4ee5\u663e\u793a
<el-button text size=\"large\" class=\"collapsed\">
<IExpand />
</el-button>

\u8bf7\u95ee\u662f\u5199\u6cd5\u4e0d\u5bf9\uff0c\u8fd8\u662f\u54ea\u4e9b\u9700\u8981\u914d\u7f6e\u3002\u503e\u5411\u7b2c\u4e00\u79cd\u65b9\u5f0f\u3002\u5982\u679c\u662f\u56e0\u4e3a\u4f7f\u7528\u4e86\u63d2\u4ef6\u5bfc\u81f4\u7ec4\u4ef6\u5e93\u65e0\u6cd5\u8bc6\u522b\u7684\u8bdd\uff0c\u76ee\u524d\u65e0\u6cd5\u89e3\u51b3\u7684\u8bdd\uff0c\u6211\u53ea\u80fd\u4f7f\u7528\u7b2c\u4e8c\u79cd\u65b9\u5f0f\u4e86\u3002" }, { "author": { "url": "member/colatea", "name": "colatea", "avatar": "https://cdn.v2ex.com/avatar/5ecd/3507/304491_large.png?m=1650853161" }, "url": "t/873979", "date_modified": "2022-08-19T06:13:14+00:00", "content_html": "VITE+ESLINT+VSCODE \u5728\u7f16\u8bd1\u9636\u6bb5 \u4e0d\u62a5 'ip_visible' is not defined \u8fd9\u79cd undefined \u7684\u9519\u8bef
\u4f46
VUE-CLI+VSCODE \u5c31\u62a5\u9519

VITE \u4e0d\u77e5\u9053\u662f\u4ec0\u4e48\u9b3c,\u975e\u8981\u5728\u6d4f\u89c8\u5668\u91cc\u64cd\u4f5c\u5230\u4f4d\u7f6e\u7684\u65f6\u5019\u624d\u4f1a\u5728 console \u91cc\u62a5,\u5f04\u4e86\u4e00\u5806\u6697\u75c5

\u8bf7\u95ee\u5927\u4f6c,\u8fd9\u662f VITE \u7684\u7279\u6027\u8fd8\u662f\u6211\u914d\u7f6e\u6709\u95ee\u9898??", "date_published": "2022-08-19T06:12:58+00:00", "title": "\u95ee\u4e0b\u524d\u7aef\u5927\u4f6c,VITE+ESLINT+VSCODE \u5728 \u7f16\u8bd1\u9636\u6bb5 \u4e0d\u62a5\u9519\u600e\u4e48\u89e3\u51b3?", "id": "t/873979" }, { "author": { "url": "member/nanxiaobei", "name": "nanxiaobei", "avatar": "https://cdn.v2ex.com/avatar/820f/2d66/127443_large.png?m=1768207963" }, "url": "t/872054", "title": "Vite + React + Ant Design + Tailwind CSS + ESLint + Prettier + TypeScript \u6700\u4f73\u5b9e\u8df5", "id": "t/872054", "date_published": "2022-08-10T17:58:46+00:00", "content_html": "

\u5f88\u96be\u8fc7 Create React App \u88ab\u65f6\u4ee3\u6dd8\u6c70\uff0c\u73b0\u5728\u6211\u4eec\u7528 Vite \u5f00\u53d1 React + Ant Design \u5427\u3002

\u5f88\u96be\u8fc7 CSS \u88ab\u65f6\u4ee3\u6dd8\u6c70\uff08\u660e\u660e\u6ca1\u6709\u597d\u4e0d\u597d\uff01\uff09\uff0c\u73b0\u5728\u6211\u4eec\u7528 Tailwind CSS \u5427\u3002

\u5f88\u96be\u8fc7 yarn \u88ab\u65f6\u4ee3\u6dd8\u6c70\uff0c\u73b0\u5728\u6211\u4eec\u7528 pnpm \u5427\u3002

1. \u7528 Vite \u751f\u6210\u4e00\u4e2a React + TypeScript \u9879\u76ee

pnpm create vite my-react-app --template react-ts\n

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

2. \u6309\u7167\u63d0\u793a\u8fdb\u5165\u9879\u76ee\uff0c\u5b89\u88c5\u4f9d\u8d56\uff1a

cd my-react-app\npnpm install\n

3. \u5b89\u88c5 Ant Design \u76f8\u5173\u4f9d\u8d56

pnpm add antd @ant-design/icons\npnpm add -D less vite-plugin-imp # \u7528\u4e8e\u6309\u9700\u5f15\u5165\u7ec4\u4ef6\n

https://ant.design/docs/react/introduce#Using-npm-or-yarn

4. \u4fee\u6539 `vite.config.ts` \u4e3a\u5982\u4e0b\u5185\u5bb9\uff1a

import { defineConfig } from 'vite';\nimport vitePluginImp from 'vite-plugin-imp';\nimport react from '@vitejs/plugin-react';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n vitePluginImp({\n optimize: true,\n libList: [\n {\n libName: 'antd',\n style: (name) => `antd/es/${name}/style`,\n },\n ],\n }),\n ],\n css: {\n preprocessorOptions: {\n less: {\n JavascriptEnabled: true,\n // \u5982\u9700\u5b9a\u5236 antd \u4e3b\u9898\uff0c\u8bf7\u53d6\u6d88\u4ee5\u4e0b\u5185\u5bb9\u6ce8\u91ca https://ant.design/docs/react/customize-theme\n // modifyVars: {\n // hack: `true; @import \"./src/theme.less\";`,\n // },\n },\n },\n },\n});\n

https://vitejs.dev/config/

5. \u5b89\u88c5 Tailwind CSS \u76f8\u5173\u4f9d\u8d56

pnpm add -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n

Tailwind CSS \uff0c\u7528\u8fc7\u90fd\u8bf4\u597d\uff01\u51e0\u4e4e\u4e0d\u7528\u518d\u6dfb\u52a0 less/scss \u6587\u4ef6\uff0c\u4e0d\u7528\u5207\u6362\u6587\u4ef6\u6539\u5b8c CSS \u518d\u5207\u56de\u6765\uff0c\u76f4\u63a5\u4fee\u6539\u7ec4\u4ef6\u7684 className \u5373\u53ef\uff0c\"\u6700\u77ed\u4fee\u6539\u8def\u5f84\"\uff0c\u4fbf\u6377\u7b80\u6d01\u73b0\u4ee3\u5316\uff01\uff08\u5f53\u7136\u5982\u679c\u4e0d\u60f3\u7528\u53ef\u4ee5\u4e0d\u5b89\u88c5\uff09

6. \u6309\u7167 Tailwind CSS \u5b98\u65b9\u6307\u5357\u914d\u7f6e

https://tailwindcss.com/docs/installation/using-postcss

\u6ce8\u610f\uff1a\u751f\u6210\u7684 TypeScript \u9879\u76ee\u4e2d\uff0c\u4e0d\u652f\u6301 .js \u914d\u7f6e\u6587\u4ef6\uff0c\u9700\u4f7f\u7528 .cjs \u6587\u4ef6\u3002

touch postcss.config.cjs\n

postcss.config.cjs \u5185\u5bb9\uff1a

module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n

tailwind.config.cjs \u5185\u5bb9\uff1a

/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./src/**/*.{html,tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n

\u91cd\u547d\u540d index.css \u4e3a main.css\uff0c\u4fee\u6539\u5176\u5185\u5bb9\u4e3a\uff1a

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n

6. \u5b89\u88c5 ESLint \u76f8\u5173\u4f9d\u8d56

pnpm add -D eslint eslint-config-react-app\n

https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app

\u867d\u7136 create-react-app \u88ab\u6dd8\u6c70\u4e86\uff0c\u4f46\u5b83\u7684 ESLint \u89c4\u5219\u8fd8\u662f\u6700\u6743\u5a01\u7684\uff0c\u5f00\u53d1 React \u9879\u76ee\u7684\u6700\u4f73\u89c4\u8303\uff01

7. \u5b89\u88c5 Prettier \u76f8\u5173\u4f9d\u8d56

pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports\n

https://github.com/prettier/eslint-config-prettier
\nhttps://github.com/trivago/prettier-plugin-sort-imports

@trivago/prettier-plugin-sort-imports\uff0c\u4e00\u4e2a\u975e\u5e38\u597d\u7528\u7684\u5bf9 import \u8fdb\u884c\u81ea\u52a8\u6392\u5e8f\u7684 Prettier \u63d2\u4ef6\uff0c\u7528\u4e86\u5c31\u56de\u4e0d\u53bb\u4e86\uff01\uff08\u5f53\u7136\u5982\u679c\u4e0d\u60f3\u7528\u53ef\u4ee5\u4e0d\u5b89\u88c5\uff09

8. \u6dfb\u52a0 `.eslintrc.cjs`

touch .eslintrc.cjs\n

module.exports = {\n extends: ['react-app', 'prettier'],\n};\n

9. \u6dfb\u52a0 `.prettierrc.cjs`

touch .prettierrc.cjs\n

module.exports = {\n singleQuote: true,\n\n // \u4ee5\u4e0b\u4e3a @trivago/prettier-plugin-sort-imports \u914d\u7f6e\uff0c\u82e5\u672a\u4f7f\u7528\u53ef\u5220\u53bb\n // importOrder \u4e2d\u7684\u6587\u4ef6\u987a\u5e8f\u89c4\u8303\uff0c\u53ef\u4f9d\u636e\u9879\u76ee\u5b9e\u9645\u60c5\u51b5\u81ea\u884c\u66f4\u6539\n plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],\n importOrder: [\n '^vite',\n '^react',\n '^antd',\n '<THIRD_PARTY_MODULES>',\n 'components/',\n 'pages/',\n 'hooks/',\n 'utils/',\n '^[./]',\n ],\n importOrderSortSpecifiers: true,\n importOrderGroupNamespaceSpecifiers: true,\n importOrderCaseInsensitive: true,\n};\n

10. \u5927\u529f\u544a\u6210\uff0c\u8bd5\u8bd5\u5427\uff01

\u5220\u9664 App.css\uff0c\u4fee\u6539 App.tsx \u6587\u4ef6\u4e3a\uff1a

import { useState } from 'react';\nimport { Button } from 'antd';\nimport { AlertOutlined } from '@ant-design/icons';\nimport reactLogo from './assets/react.svg';\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n return (\n <div className=\"grid place-content-center h-screen text-center text-lg\">\n <div className=\"flex mx-auto items-center gap-8\">\n <a href=\"https://vitejs.dev\" target=\"_blank\" rel=\"noreferrer\">\n <img src=\"/vite.svg\" className=\"w-28\" alt=\"Vite logo\" />\n </a>\n <a href=\"https://reactjs.org\" target=\"_blank\" rel=\"noreferrer\">\n <img\n src={reactLogo}\n className=\"w-32 animate-spin [animation-duration:10s]\"\n alt=\"React logo\"\n />\n </a>\n </div>\n <h1 className=\"my-20 font-semibold text-6xl\">Vite + React</h1>\n <div>\n <Button\n className=\"inline-flex items-center rounded-md\"\n size=\"large\"\n icon={<AlertOutlined />}\n OnClick={() => setCount((count) => count + 1)}\n >\n count is {count}\n </Button>\n <p className=\"mt-4 mb-12\">\n Edit <code>src/App.tsx</code> and save to test HMR\n </p>\n </div>\n <p className=\"opacity-40\">\n Click on the Vite and React logos to learn more\n </p>\n </div>\n );\n}\n\nexport default App;\n

\u542f\u52a8\u9879\u76ee\uff1a

pnpm run dev\n

\u8036\u5bfa\uff01\u70b9\u5f00\u672c\u5730\u5f00\u53d1\u94fe\u63a5\u770b\u770b\u6548\u679c\u5427\uff01

\u9644\u8d60

\u4ee5\u4e0a shell \u547d\u4ee4\u7684\u5408\u8ba2\u7248\uff1a

pnpm create vite my-react-app --template react-ts\ncd my-react-app\npnpm install\n\npnpm add antd @ant-design/icons\npnpm add -D less vite-plugin-imp tailwindcss postcss autoprefixer eslint eslint-config-react-app prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports\n\nnpx tailwindcss init\ntouch postcss.config.cjs\ntouch .eslintrc.cjs\ntouch .prettierrc.cjs\n

\n" }, { "author": { "url": "member/missilexuan", "name": "missilexuan", "avatar": "https://cdn.v2ex.com/gravatar/ff7483ec4b0d6f79209f4ad0db1dabd3?s=73&d=retro" }, "url": "t/863345", "title": "vite+vue3+ts \u81ea\u5df1\u642d\u5efa\u65f6\u5019\u4e00\u4e9b\u6b65\u9aa4\u53ca\u8e29\u5751\u5206\u4eab", "id": "t/863345", "date_published": "2022-07-01T00:25:00+00:00", "content_html": "

vite \u5b98\u7f51

\u521d\u59cb\u6784\u5efa\u8fd0\u884c

\u8ddf\u7740\u5b98\u7f51\u6784\u5efa\u5b8c\u6210\u540e
\nyarn \u62c9\u53d6\u5305\u540e\u76f4\u63a5 yarn dev \u65e0\u6cd5\u8fd0\u884c\u8d77\u6765
\n\u547d\u4ee4\u884c\u663e\u793a

> Local: http://localhost:3000/ \n> Network: use `--host` to expose\n

\u9875\u9762\u663e\u793a Cannot GET /

\n
\u539f\u56e0\uff1a\u6ca1\u6709\u5c40\u57df\u7f51\u4e2d\u66b4\u9732\u670d\u52a1
\n\u9700\u8981\u518d vite.config.ts \u4e2d\u6dfb\u52a0\u914d\u7f6e
\n

server: {\n host: '0.0.0.0'\n}\n

\u6dfb\u52a0\u540e\u547d\u4ee4\u884c\u663e\u793a

 > Network: http://192.168.52.1:3000/ \n > Network: http://192.168.142.1:3000/\n > Local: http://localhost:3000/ \n > Network: http://172.17.12.99:3000/\n

\u53ef\u6b63\u5e38\u8bbf\u95ee

\u914d\u7f6e Eslint standard \u89c4\u5219

\u7531\u4e8e vite \u4e2d\u6ca1\u6709\u5e2e\u6211\u4eec\u5f15\u5165 eslint \u4ee3\u7801\u6821\u9a8c\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u81ea\u5df1\u624b\u52a8\u914d\u7f6e eslint
\n\u6ce8\u610f\u4e0d\u8981\u7167\u6284 vue-cli \u91cc\u7684 .edlintrc.js \u914d\u7f6e \u5176\u4e2d\u4e00\u4e9b\u5f15\u5165\u7684\u5185\u5bb9\u662f\u9488\u5bf9 vue-cli \u6765\u7684

\u9700\u8981\u5b89\u88c5\u7684\u5305

yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint -D\n

\u5404\u5305\u8bf4\u660e

//\u57fa\u7840\u7684 eslit\neslint \n//Vue \u7684\u5b98\u65b9 ESLint \u63d2\u4ef6 \u9488\u5bf9 vue \u8bed\u6cd5\u8fdb\u884c\u6821\u9a8c\neslint-plugin-vue \n// standard \u89c4\u5219\u6821\u9a8c\neslint-config-standard \neslint-plugin-import \n//eslint-plugin-n \u7528 n \u4e0d\u8981\u7528 node node \u505c\u6b62\u7ef4\u62a4\u4e86 standard \u4f9d\u8d56\u4f1a\u62a5\u9519\neslint-plugin-n \neslint-plugin-promise \n// \u4e00\u4e2a ESLint \u89e3\u6790\u5668\uff0c\u5b83\u5229\u7528 TypeScript ESTree \u5141\u8bb8 ESLint lint TypeScript \u6e90\u4ee3\u7801\n@typescript-eslint/parser \n// \u4e00\u4e2a ESLint \u63d2\u4ef6\uff0c\u4e3a TypeScript \u4ee3\u7801\u5e93\u63d0\u4f9b lint \u89c4\u5219\n@typescript-eslint/eslint-plugin\nvite-plugin-eslint // vite ESLint \u63d2\u4ef6\u3002\n\n

\u6dfb\u52a0.eslintrc.js \u6587\u4ef6

module.exports = {\n root: true,\n parser: 'vue-eslint-parser',\n extends: [\n 'standard',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:vue/vue3-recommended'\n ],\n plugins: ['@typescript-eslint', 'vue'],\n env: {\n node: true\n },\n parserOptions: {\n ecmaVersion: 2020,\n parser: '@typescript-eslint/parser'\n }\n}\n

\u5982\u679c\u4e0d\u751f\u6548\u68c0\u67e5\u4e0b vsconde eslint \u63d2\u4ef6\u6709\u6ca1\u6709\u5b89\u88c5\u542f\u7528\uff0c\u5982\u679c\u5b89\u88c5\u4e86 \u770b\u4e0b eslint \u63d2\u4ef6\u6709\u6ca1\u6709\u62a5\u9519

vue3 <script setup lang=\"ts\"> \u5199\u6cd5\u4e2d\u4e0d\u9700\u8981\u5f15\u5165 defineProps \u5373\u53ef\u4f7f\u7528
\n\u4f46\u662f eslint \u4f1a\u62a5\u9519\n\u9700\u8981\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u6dfb\u52a0\u914d\u7f6e

env: {\n node: true,\n 'vue/setup-compiler-macros': true ++\n },\n

\u4e4b\u540e\u53d1\u73b0\u65b0\u95ee\u9898
\n\u53d1\u73b0 standard \u8bed\u6cd5\u89c4\u5219 vscode \u4f1a\u62a5\u7ea2 \u4f46\u662f\u8fd0\u884c\u4e0d\u4f1a\u62a5\u9519
\n\u53d1\u73b0\u662f vite.config.ts \u4e2d eslintPlugin({ include: []}) \u53ea\u5199\u4e86 js \u5c06 ts \u8865\u4e0a\u5c31\u597d\u4e86

@ \u6307\u5411 src

\u5728 vite.config.ts \u4e2d\u914d\u7f6e

 resolve: {\n alias: {\n // \u5f53\u4f7f\u7528\u6587\u4ef6\u7cfb\u7edf\u8def\u5f84\u7684\u522b\u540d\u65f6\uff0c\u8bf7\u59cb\u7ec8\u4f7f\u7528\u7edd\u5bf9\u8def\u5f84\u3002\u76f8\u5bf9\u8def\u5f84\u7684\u522b\u540d\u503c\u4f1a\u539f\u5c01\u4e0d\u52a8\u5730\u88ab\u4f7f\u7528\uff0c\u56e0\u6b64\u65e0\u6cd5\u88ab\u6b63\u5e38\u89e3\u6790\u3002\n '@': path.resolve(__dirname, './src')\n }\n }\n

\u6ca1\u6709 path \u9700\u8981\u5f15\u5165 import path from 'path'
\n\u5982\u679c path \u62a5\u5f15\u5165\u9519\u8bef \u9700\u8981\u5728 tsconfig.node.json \u4e2d \u6dfb\u52a0

\"compilerOptions\": {\n \"allowSyntheticDefaultImports\": true\n}\n

\u5982\u679c\u662f ts \u9879\u76ee \u8fd8\u9700\u8981 yarn add @types/node -D
\n\u540c\u65f6\u5728 config.json \u4e2d\u6dfb\u52a0

\"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"src/*\"]\n }\n}\n\n

\u73af\u5883\u53d8\u91cf

vue-router

yarn add vue-router@4

css \u9884\u5904\u7406\u5668

npm add -D stylus\n\u5b98\u7f51\u8bf4\u660e
\nVite \u4e5f\u540c\u65f6\u63d0\u4f9b\u4e86\u5bf9 .scss, .sass, .less, .styl \u548c .stylus \u6587\u4ef6\u7684\u5185\u7f6e\u652f\u6301\u3002
\n\u6ca1\u6709\u5fc5\u8981\u4e3a\u5b83\u4eec\u5b89\u88c5\u7279\u5b9a\u7684 Vite \u63d2\u4ef6\uff0c\u4f46\u5fc5\u987b\u5b89\u88c5\u76f8\u5e94\u7684\u9884\u5904\u7406\u5668\u4f9d\u8d56
\n\u5f15\u5165\u5168\u5c40\u5219\u9700\u8981 yarn add stylus-loader -D

\u5f15\u5165\u5168\u5c40\u6837\u5f0f\u5728 vite.config.ts \u4e2d\u6dfb\u52a0

css: {\n preprocessorOptions: {\n stylus: {\n imports: [\n path.resolve(__dirname, './src/assets/stylus/reset.styl')\n ]\n }\n }\n }\n

\u6253\u5305 GZIP \u538b\u7f29

yarn add vite-plugin-compression -D\n\u5728 vite.config.ts \u4e2d\u5f15\u5165 \u914d\u7f6e\u8bf4\u660e

import viteCompression from 'vite-plugin-compression'\nexport default defineConfig({\nplugins:\n [\n viteCompression({ threshold: 100 * 1000 })\n ]\n})\n

\u8def\u7531+transition

transition \u5185\u5fc5\u987b\u53ea\u6709\u4e00\u4e2a\u6839\u5143\u7d20

\u81ea\u52a8\u5f15\u5165\u6587\u4ef6\u5939\u5185\u6587\u4ef6

\u5728\u4e4b\u524d package \u6253\u5305\u6a21\u5f0f\u4e0b
\n\u63d0\u4f9b\u4e86 require.context \u6765\u8fdb\u884c\u6587\u4ef6\u5939\u904d\u5386\u5bfc\u5165\u529f\u80fd
\n\u6211\u4eec\u5728\u81ea\u52a8\u5bfc\u5165 store \u4e2d\u7528\u5230\u4e86

\u5728 vite \u4e2d \u6ca1\u6709 require.context \uff0cvite \u63d0\u4f9b\u4e86 import.meta.glob \u8fdb\u884c\u5bfc\u5165

\n" }, { "author": { "url": "member/taowen", "name": "taowen", "avatar": "https://cdn.v2ex.com/avatar/ce10/b998/45858_large.png?m=1647230113" }, "url": "t/850995", "title": "How to use Vite to build all kinds of TypeScript projects, including CSR/SSR/CDN/MonoRepository", "id": "t/850995", "date_published": "2022-05-05T09:55:31+00:00", "content_html": "

https://github.com/taowen/vite-howto

\u8e69\u811a\u82f1\u6587\uff0c\u89c1\u8c05

\n" }, { "author": { "url": "member/qq309187341", "name": "qq309187341", "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro" }, "url": "t/850538", "title": "\u8bf7\u95ee\u80fd\u5426\u901a\u8fc7 vite \u63d2\u4ef6\u529f\u80fd\u53bb\u4fee\u6539\u9879\u76ee\u4e2d\u67d0\u4e00\u4e2a\u6587\u4ef6\u7684\u5185\u5bb9\u6216\u8005\u83b7\u53d6\u6587\u4ef6\u5185\u5bb9\uff1f", "id": "t/850538", "date_published": "2022-05-02T11:17:56+00:00", "content_html": "\u5982\u9898\uff0c\u6709\u76f8\u5173\u6559\u7a0b\u4e48\uff1f" }, { "author": { "url": "member/Leviathann", "name": "Leviathann", "avatar": "https://cdn.v2ex.com/gravatar/d3b22910a49ecf620ab67790d7f594eb?s=73&d=retro" }, "url": "t/827185", "date_modified": "2022-01-09T14:59:39+00:00", "content_html": "\u5c1d\u8bd5\u914d\u4e86\u4e00\u4e0b\uff0c\u53d1\u73b0\u5f88\u591a\u4e1c\u897f\u5b98\u7f51\u90fd\u6ca1\u8bb2
\u6709\u7684\u914d\u7f6e\u8fd8\u548c rollup \u6709\u91cd\u53e0

\u6bd4\u5982\u6211\u60f3\u628a\u6253\u5305\u7684\u4e1c\u897f\u90fd\u8f93\u51fa\u5230\u4e00\u4e2a\u6587\u4ef6\u5939\uff08\u800c\u4e0d\u662f\u9ed8\u8ba4\u7684 dist + dist/asset \uff09\u5e76\u4e14\u81ea\u5b9a\u4e49\u4e00\u4e2a\u6253\u5305\u76ee\u6807\u6587\u4ef6\u540d\uff0c\u5728\u5b98\u7f51\u641c\u4e86\u534a\u5929\u6ca1\u641c\u5230\u600e\u4e48\u914d\uff0c\u5c1d\u8bd5\u914d buildRollupOptions \uff0c\u6539\u4e86 file \u53c8\u62a5\u9519\uff0c\u53c8\u6839\u636e\u62a5\u9519\u6539\u4e86\u51e0\u4e2a\u914d\u7f6e\u9879\u624d\u53d1\u73b0\u539f\u6765\u9700\u8981\u628a dir \u548c manualChunks \u8bbe\u4e3a undefined \u6765\u628a vite \u9ed8\u8ba4\u7684\u914d\u7f6e\u8986\u76d6\u6389\u624d\u884c

\u600e\u4e48\u624d\u80fd\u77e5\u9053 vite \u9ed8\u8ba4\u7684 rollup \u914d\u7f6e\u662f\u5565\uff1f\u5fc5\u987b\u770b\u6e90\u7801\u5417\uff1f

\u800c\u4e14\u611f\u89c9\u524d\u7aef\u7684\u5de5\u5177\u94fe\u6709\u5f88\u591a\u91cd\u53e0\u7684\u529f\u80fd\uff0cesbuild \u53ef\u4ee5\u8bbe\u7f6e\u7f16\u8bd1\u76ee\u6807\uff0ctsc \u4e5f\u53ef\u4ee5\uff0crollup \u4e5f\u53ef\u4ee5\u7528 babel \u63d2\u4ef6\u505a

tsc \u76f4\u63a5\u6307\u5b9a\u7248\u672c\u5c31\u884c\uff08 es5 \uff09\u800c esbuild \u548c babel \u8981\u7528\u4e2a\u5947\u602a\u7684 query \u5b57\u7b26\u4e32\uff0c\u6307\u5b9a\u6d4f\u89c8\u5668\u7248\u672c\u6216\u8005\u5360\u6709\u7387\u5565\u7684\uff1f

\u53e6\u5916\u5982\u679c\u60f3\u6307\u5b9a\u8f93\u5165\u548c\u8f93\u51fa\u7684 html \u6587\u4ef6\u540d\u53c8\u8be5\u600e\u4e48\u505a\uff1f

\u5b98\u7f51\u6ca1\u63d0\uff0c\u7ffb rollup \u7684\u6587\u6863\u53d1\u73b0\u5b98\u65b9\u7684\u5b9e\u4f8b\u7684 entry \u90fd\u662f js \u6587\u4ef6\uff0c\u8bd5\u4e86\u4e00\u4e0b\u624b\u52a8\u5728 rollupOptions \u6307\u5b9a input \uff0c\u4f46\u662f\u53c8\u548c output \u7684 file \u51b2\u7a81\uff1f", "date_published": "2022-01-09T14:59:15+00:00", "title": "vite \u5e94\u8be5\u600e\u4e48\u5b66\uff1f", "id": "t/827185" }, { "author": { "url": "member/devilte", "name": "devilte", "avatar": "https://cdn.v2ex.com/avatar/e5ef/96d1/527498_large.png?m=1776739066" }, "url": "t/816007", "date_modified": "2021-11-17T05:04:34+00:00", "content_html": "

\u524d\u7aef\u9879\u76ee\uff0c\u6280\u672f\u6808\u662f Vue3.x + Vite + TypeScript

\u672c\u5730\u8fd0\u884c\u8d77\u6765\u7684\u4e00\u5207\u6b63\u5e38\uff0c\u6253\u5305\u4e0a\u7ebf\u540e\uff0c\u63a7\u5236\u53f0\u62a5\u4e86\u9519\u8bef:

TypeError: Right-hand side of 'instanceof' is not an object\n

\u8c03\u8bd5\u4e4b\u540e\u53d1\u73b0\uff0c\u6253\u5305\u540e\u7684\u6e90\u7801\u91cc\uff0c\u4e00\u4e2a instanceof \u65b9\u6cd5\u7684\u5de6\u8fb9\u662f\u4e00\u4e2a div \u5143\u7d20\u5bf9\u8c61\uff0c\u8fd9\u4e2a div \u5bf9\u8c61\u662f\u7528\u6765\u7ed1\u5b9a\u753b\u5e03\u7528\u7684\u5bb9\u5668\uff0c\u4ee3\u7801\u4e2d\u5982\u4e0b\uff1a

 template:\n<div class=\"graph\" ref=\"graphRef\" id=\"graphRef\"></div>\n\nscript:\nconst graphRef = ref<HTMLElement | null>(null);\n

\u62a5\u9519\u4f4d\u7f6e\u4ee3\u7801\u5982\u4e0b\uff0c\u56fe\u4e0a\u7684\u8fd9\u4e9b\u4ee3\u7801\u5e76\u4e0d\u662f\u5199\u5728\u9879\u76ee\u91cc\u7684\uff0c\u5e94\u8be5\u662f\u6253\u5305\u540e\u6ce8\u5165\u8fdb\u53bb\u7684\uff1a\n $\"I4YiC9.png\"$

\u73b0\u5728\u95ee\u9898\u5c31\u662f\u4e0d\u77e5\u9053 \u6253\u5305\u540e\u7684\u8fd9\u4e9b\u65b9\u6cd5\u4f7f\u7528\u903b\u8f91\u662f\u4ec0\u4e48\uff1f\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u62a5\u9519\u5462\uff1f\u6c42\u89e3

\n", "date_published": "2021-11-17T04:59:31+00:00", "title": "vite \u6253\u5305\u540e\uff0c\u597d\u597d\u7684\u529f\u80fd\u62a5\u9519\u4e86\uff1f\u6709\u6ca1\u6709\u61c2 vite \u6253\u5305\u539f\u7406\u7684\u5927\u4f6c\uff0c\u6c42\u89e3\u4e00\u4e0b", "id": "t/816007" }, { "author": { "url": "member/XTTX", "name": "XTTX", "avatar": "https://cdn.v2ex.com/avatar/1d7d/8905/477613_large.png?m=1586326604" }, "url": "t/815145", "date_modified": "2021-11-13T07:49:05+00:00", "content_html": "Vite \u7528 es-build, \u901f\u5ea6\u5c31\u4e0d\u7528\u591a\u8bb2\u4e86\u3002\u5bf9\u6bd4 CRA, \u597d\u591a\u5730\u65b9\u6709\u4e0d\u540c\u3002 \u6211\u82b1\u4e86\u4e0d\u5c11\u65f6\u95f4\uff0c\u641c\u4e86\u4e0d\u5c11\u4e1c\u897f\uff0c\u505a\u4e86\u4e00\u4e2a\u81ea\u5df1\u7528\u7684 starter kit.

Vite + React + Typescript + Eslint + Airbnb eslint rules + Airbnb Typescript rules + Prettier + env variable import + Absolute Import Path

https://github.com/jt6677/vite_ts_eslint_prettier_aribnbts

==============================================
!yes, tons of setup and config files.

==============================================
env variable import:

You need to add type in env.d.ts like \"readonly VITE_ANYTHING: string\"
variables MUST start with VITE_
usage of env variable in your app, no need to import, just use it as a global variable: console.log(import.meta.env.VITE_API_URL)

==============================================
Absolute Import Path

import App from \"~/components\". ~/ is the absoulte path, equal to ./src

==============================================
reverse Proxy in vite.config.ts", "date_published": "2021-11-13T07:47:39+00:00", "title": "Vite+React+TS+Eslint+Prettier starter kit", "id": "t/815145" }, { "author": { "url": "member/oligi", "name": "oligi", "avatar": "https://cdn.v2ex.com/avatar/44a2/beec/492604_large.png?m=1767841038" }, "url": "t/776391", "date_modified": "2022-03-08T06:23:04+00:00", "content_html": "

\u5c24\u5927\u65b0\u51fa\u7684 vitepress \u636e\u8bf4\u6bd4 vuepress \u66f4\u597d\uff0c\u6240\u4ee5\u60f3\u8bd5\u8bd5
\u642d\u5efa\u597d\u9879\u76ee\u540e\u53d1\u73b0\u81ea\u5e26\u7684 UI \u5f88\u4e0d\u559c\u6b22\uff0c\u6240\u4ee5\u6253\u7b97\u6362\u4e2a\u7c7b\u4f3c elementUI \u6216\u8005 Vuetify\uff0c\u8bf7\u95ee\u6709\u5927\u4f6c\u77e5\u9053\u5417\uff1f