{
  "version": "https://jsonfeed.org/version/1", 
  "title": "Vite", 
  "description": "\u4e0b\u4e00\u4ee3\u524d\u7aef\u5f00\u53d1\u4e0e\u6784\u5efa\u5de5\u5177", 
  "home_page_url": "https://www.v2ex.com/go/vite", 
  "feed_url": "https://www.v2ex.com/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": "https://www.v2ex.com/member/Danswerme", 
        "name": "Danswerme", 
        "avatar": "https://cdn.v2ex.com/avatar/7460/e1cd/274090_large.png?m=1765551963"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/1102050", 
      "date_published": "2025-01-02T08:20:10+00:00", 
      "content_html": "<p>\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  <a href=\"https://www.xqy404.com/blog/2024/migrate-vite-to-rspack/\" rel=\"nofollow\">https://www.xqy404.com/blog/2024/migrate-vite-to-rspack/</a>  \uff0c\u4f46\u662f\u6ca1\u6709\u89e3\u51b3\u65b9\u6848\u3002</p>\n<p>\u5927\u5bb6\u6709\u9047\u5230\u8fd9\u4e2a\u95ee\u9898\u7684\u5417\uff1f</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/dzdh", 
        "name": "dzdh", 
        "avatar": "https://cdn.v2ex.com/avatar/1683/7ebf/226307_large.png?m=1757987240"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/969726", 
      "date_published": "2023-08-31T04:29:55+00:00", 
      "content_html": ""
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/chenliangngng", 
        "name": "chenliangngng", 
        "avatar": "https://cdn.v2ex.com/gravatar/780a5460ba7bbd960d7046fa4ad1e463?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/967335", 
      "title": "vite \u6709\u4ec0\u4e48\u63d2\u4ef6\u4f1a\u628a unicode \u8f6c\u6210\u4e2d\u6587\u5417", 
      "id": "https://www.v2ex.com/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<br /><br />\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<br /><br />\u9879\u76ee\u662f vue3+vite+antdv  <br /><br /><br />\u5176\u4ed6\u63d2\u4ef6<br />```<br />\"@vitejs/plugin-vue\":\"^2.3.1\",<br />\"@vitejs/plugin-vue-jsx\":.\"^1.3.10\",<br />\"vite\":\"^2.9.7\",<br />\"vite-babel-plugin\":\"0.0.2\",<br />\"vite-plugin-cesium\":\"1.2.10\",<br />\"vite-plugin-commonjs-externals\":\"00.1.1\",<br />```"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/feelapi", 
        "name": "feelapi", 
        "avatar": "https://cdn.v2ex.com/avatar/8c06/9f21/36491_large.png?m=1425350253"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/965905", 
      "date_published": "2023-08-16T13:40:48+00:00", 
      "content_html": "<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/qq309187341", 
        "name": "qq309187341", 
        "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/931821", 
      "title": "\u8bf7\u6559\u4e00\u4e2a vite \u4ee3\u7406\u7684\u95ee\u9898", 
      "id": "https://www.v2ex.com/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<br /> \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<br /> <br /> server: {<br />    port: 9900,<br />    proxy: {<br />      '/root': {<br />        target: 'http://192.168.3.216',<br />        changeOrigin: true,<br />        configure: (proxy, options) =&gt; {<br />          proxy.on('proxyReq', (proxyReq, req, res) =&gt; {<br />            console.log(req.body)<br />          })<br />        }<br />      },<br />    },<br />  },"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/qq309187341", 
        "name": "qq309187341", 
        "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/928106", 
      "title": "\u8bf7\u95ee\u5404\u4f4d\u5927\u4f6c\u4e00\u4e2a vite \u63d2\u4ef6\u7684\u95ee\u9898", 
      "id": "https://www.v2ex.com/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": "https://www.v2ex.com/member/jiechen257", 
        "name": "jiechen257", 
        "avatar": "https://cdn.v2ex.com/avatar/eb0b/64d7/615689_large.png?m=1720961584"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/927751", 
      "date_published": "2023-03-28T02:16:41+00:00", 
      "content_html": "<pre><code class=\"language-shell\"># .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</code></pre>\n<pre><code class=\"language-js\">// \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</code></pre>\n<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/dominickkorey", 
        "name": "dominickkorey", 
        "avatar": "https://cdn.v2ex.com/avatar/decd/6a86/573155_large.png?m=1742484963"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/902145", 
      "date_published": "2022-12-13T03:33:48+00:00", 
      "content_html": "<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/qq309187341", 
        "name": "qq309187341", 
        "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/894497", 
      "title": "element plus \u6309\u94ae\u7684\u95ee\u9898\uff0c\u6c42\u5e2e\u52a9", 
      "id": "https://www.v2ex.com/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<br /><br />1:\u65e0\u6cd5\u663e\u793a<br /> &lt;el-button text size=\"large\" :icon=\"props.collapsed ? IExpand : IFold\" class=\"collapsed\"&gt;<br />  &lt;/el-button&gt;<br />  <br />2.\u53ef\u4ee5\u663e\u793a<br /> &lt;el-button text size=\"large\" class=\"collapsed\"&gt;<br />    &lt;IExpand /&gt;<br />  &lt;/el-button&gt;<br />  <br />\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": "https://www.v2ex.com/member/colatea", 
        "name": "colatea", 
        "avatar": "https://cdn.v2ex.com/avatar/5ecd/3507/304491_large.png?m=1650853161"
      }, 
      "url": "https://www.v2ex.com/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<br />\u4f46<br />VUE-CLI+VSCODE \u5c31\u62a5\u9519<br /><br />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<br /><br />\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": "https://www.v2ex.com/t/873979"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/nanxiaobei", 
        "name": "nanxiaobei", 
        "avatar": "https://cdn.v2ex.com/avatar/820f/2d66/127443_large.png?m=1768207963"
      }, 
      "url": "https://www.v2ex.com/t/872054", 
      "title": "Vite + React + Ant Design + Tailwind CSS + ESLint + Prettier + TypeScript \u6700\u4f73\u5b9e\u8df5", 
      "id": "https://www.v2ex.com/t/872054", 
      "date_published": "2022-08-10T17:58:46+00:00", 
      "content_html": "<p>\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</p>\n<p>\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</p>\n<p>\u5f88\u96be\u8fc7 yarn \u88ab\u65f6\u4ee3\u6dd8\u6c70\uff0c\u73b0\u5728\u6211\u4eec\u7528 pnpm \u5427\u3002</p>\n<h2>1. \u7528 Vite \u751f\u6210\u4e00\u4e2a React + TypeScript \u9879\u76ee</h2>\n<pre><code class=\"language-shell\">pnpm create vite my-react-app --template react-ts\n</code></pre>\n<p><a href=\"https://vitejs.dev/guide/#scaffolding-your-first-vite-project\" rel=\"nofollow\">https://vitejs.dev/guide/#scaffolding-your-first-vite-project</a></p>\n<h2>2. \u6309\u7167\u63d0\u793a\u8fdb\u5165\u9879\u76ee\uff0c\u5b89\u88c5\u4f9d\u8d56\uff1a</h2>\n<pre><code class=\"language-shell\">cd my-react-app\npnpm install\n</code></pre>\n<h2>3. \u5b89\u88c5 Ant Design \u76f8\u5173\u4f9d\u8d56</h2>\n<pre><code class=\"language-shell\">pnpm add antd @ant-design/icons\npnpm add -D less vite-plugin-imp # \u7528\u4e8e\u6309\u9700\u5f15\u5165\u7ec4\u4ef6\n</code></pre>\n<p><a href=\"https://ant.design/docs/react/introduce#Using-npm-or-yarn\" rel=\"nofollow\">https://ant.design/docs/react/introduce#Using-npm-or-yarn</a></p>\n<h2>4. \u4fee\u6539 <code>vite.config.ts</code> \u4e3a\u5982\u4e0b\u5185\u5bb9\uff1a</h2>\n<pre><code class=\"language-js\">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) =&gt; `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</code></pre>\n<p><a href=\"https://vitejs.dev/config/\" rel=\"nofollow\">https://vitejs.dev/config/</a></p>\n<h2>5. \u5b89\u88c5 Tailwind CSS \u76f8\u5173\u4f9d\u8d56</h2>\n<pre><code class=\"language-shell\">pnpm add -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n</code></pre>\n<p>Tailwind CSS \uff0c\u7528\u8fc7\u90fd\u8bf4\u597d\uff01\u51e0\u4e4e\u4e0d\u7528\u518d\u6dfb\u52a0 <code>less</code>/<code>scss</code> \u6587\u4ef6\uff0c\u4e0d\u7528\u5207\u6362\u6587\u4ef6\u6539\u5b8c CSS \u518d\u5207\u56de\u6765\uff0c\u76f4\u63a5\u4fee\u6539\u7ec4\u4ef6\u7684 <code>className</code> \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</p>\n<h2>6. \u6309\u7167 Tailwind CSS \u5b98\u65b9\u6307\u5357\u914d\u7f6e</h2>\n<p><a href=\"https://tailwindcss.com/docs/installation/using-postcss\" rel=\"nofollow\">https://tailwindcss.com/docs/installation/using-postcss</a></p>\n<p>\u6ce8\u610f\uff1a\u751f\u6210\u7684 TypeScript \u9879\u76ee\u4e2d\uff0c\u4e0d\u652f\u6301 <code>.js</code> \u914d\u7f6e\u6587\u4ef6\uff0c\u9700\u4f7f\u7528 <code>.cjs</code> \u6587\u4ef6\u3002</p>\n<pre><code class=\"language-shell\">touch postcss.config.cjs\n</code></pre>\n<p><code>postcss.config.cjs</code> \u5185\u5bb9\uff1a</p>\n<pre><code class=\"language-js\">module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n</code></pre>\n<p><code>tailwind.config.cjs</code> \u5185\u5bb9\uff1a</p>\n<pre><code class=\"language-js\">/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./src/**/*.{html,tsx}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n</code></pre>\n<p>\u91cd\u547d\u540d <code>index.css</code> \u4e3a <code>main.css</code>\uff0c\u4fee\u6539\u5176\u5185\u5bb9\u4e3a\uff1a</p>\n<pre><code class=\"language-js\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n</code></pre>\n<h2>6. \u5b89\u88c5 ESLint \u76f8\u5173\u4f9d\u8d56</h2>\n<pre><code class=\"language-shell\">pnpm add -D eslint eslint-config-react-app\n</code></pre>\n<p><a href=\"https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app\" rel=\"nofollow\">https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app</a></p>\n<p>\u867d\u7136 <code>create-react-app</code> \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</p>\n<h2>7. \u5b89\u88c5 Prettier \u76f8\u5173\u4f9d\u8d56</h2>\n<pre><code class=\"language-shell\">pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports\n</code></pre>\n<p><a href=\"https://github.com/prettier/eslint-config-prettier\" rel=\"nofollow\">https://github.com/prettier/eslint-config-prettier</a><br/>\n<a href=\"https://github.com/trivago/prettier-plugin-sort-imports\" rel=\"nofollow\">https://github.com/trivago/prettier-plugin-sort-imports</a></p>\n<p><code>@trivago/prettier-plugin-sort-imports</code>\uff0c\u4e00\u4e2a\u975e\u5e38\u597d\u7528\u7684\u5bf9 <code>import</code> \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</p>\n<h2>8. \u6dfb\u52a0 <code>.eslintrc.cjs</code></h2>\n<pre><code class=\"language-shell\">touch .eslintrc.cjs\n</code></pre>\n<pre><code class=\"language-js\">module.exports = {\n  extends: ['react-app', 'prettier'],\n};\n</code></pre>\n<h2>9. \u6dfb\u52a0 <code>.prettierrc.cjs</code></h2>\n<pre><code class=\"language-shell\">touch .prettierrc.cjs\n</code></pre>\n<pre><code class=\"language-js\">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    '&lt;THIRD_PARTY_MODULES&gt;',\n    'components/',\n    'pages/',\n    'hooks/',\n    'utils/',\n    '^[./]',\n  ],\n  importOrderSortSpecifiers: true,\n  importOrderGroupNamespaceSpecifiers: true,\n  importOrderCaseInsensitive: true,\n};\n</code></pre>\n<h2>10. \u5927\u529f\u544a\u6210\uff0c\u8bd5\u8bd5\u5427\uff01</h2>\n<p>\u5220\u9664 <code>App.css</code>\uff0c\u4fee\u6539 <code>App.tsx</code> \u6587\u4ef6\u4e3a\uff1a</p>\n<pre><code class=\"language-tsx\">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    &lt;div className=\"grid place-content-center h-screen text-center text-lg\"&gt;\n      &lt;div className=\"flex mx-auto items-center gap-8\"&gt;\n        &lt;a href=\"https://vitejs.dev\" target=\"_blank\" rel=\"noreferrer\"&gt;\n          &lt;img src=\"/vite.svg\" className=\"w-28\" alt=\"Vite logo\" /&gt;\n        &lt;/a&gt;\n        &lt;a href=\"https://reactjs.org\" target=\"_blank\" rel=\"noreferrer\"&gt;\n          &lt;img\n            src={reactLogo}\n            className=\"w-32 animate-spin [animation-duration:10s]\"\n            alt=\"React logo\"\n          /&gt;\n        &lt;/a&gt;\n      &lt;/div&gt;\n      &lt;h1 className=\"my-20 font-semibold text-6xl\"&gt;Vite + React&lt;/h1&gt;\n      &lt;div&gt;\n        &lt;Button\n          className=\"inline-flex items-center rounded-md\"\n          size=\"large\"\n          icon={&lt;AlertOutlined /&gt;}\n          onClick={() =&gt; setCount((count) =&gt; count + 1)}\n        &gt;\n          count is {count}\n        &lt;/Button&gt;\n        &lt;p className=\"mt-4 mb-12\"&gt;\n          Edit &lt;code&gt;src/App.tsx&lt;/code&gt; and save to test HMR\n        &lt;/p&gt;\n      &lt;/div&gt;\n      &lt;p className=\"opacity-40\"&gt;\n        Click on the Vite and React logos to learn more\n      &lt;/p&gt;\n    &lt;/div&gt;\n  );\n}\n\nexport default App;\n</code></pre>\n<p>\u542f\u52a8\u9879\u76ee\uff1a</p>\n<pre><code class=\"language-shell\">pnpm run dev\n</code></pre>\n<p>\u8036\u5bfa\uff01\u70b9\u5f00\u672c\u5730\u5f00\u53d1\u94fe\u63a5\u770b\u770b\u6548\u679c\u5427\uff01</p>\n<h2>\u9644\u8d60</h2>\n<p>\u4ee5\u4e0a shell \u547d\u4ee4\u7684\u5408\u8ba2\u7248\uff1a</p>\n<pre><code class=\"language-shell\">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</code></pre>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/missilexuan", 
        "name": "missilexuan", 
        "avatar": "https://cdn.v2ex.com/gravatar/ff7483ec4b0d6f79209f4ad0db1dabd3?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/863345", 
      "title": "vite+vue3+ts \u81ea\u5df1\u642d\u5efa\u65f6\u5019\u4e00\u4e9b\u6b65\u9aa4\u53ca\u8e29\u5751\u5206\u4eab", 
      "id": "https://www.v2ex.com/t/863345", 
      "date_published": "2022-07-01T00:25:00+00:00", 
      "content_html": "<p><a href=\"https://vitejs.cn/guide/\" rel=\"nofollow\">vite \u5b98\u7f51</a></p>\n<h1>\u521d\u59cb\u6784\u5efa\u8fd0\u884c</h1>\n<p>\u8ddf\u7740\u5b98\u7f51\u6784\u5efa\u5b8c\u6210\u540e<br/>\nyarn \u62c9\u53d6\u5305\u540e\u76f4\u63a5 yarn dev \u65e0\u6cd5\u8fd0\u884c\u8d77\u6765<br/>\n\u547d\u4ee4\u884c\u663e\u793a   </p>\n<pre><code>&gt; Local: http://localhost:3000/  \n&gt; Network: use `--host` to expose\n</code></pre>\n<p>\u9875\u9762\u663e\u793a Cannot GET /</p>\n<blockquote>\n<p>\u539f\u56e0\uff1a\u6ca1\u6709\u5c40\u57df\u7f51\u4e2d\u66b4\u9732\u670d\u52a1<br/>\n\u9700\u8981\u518d vite.config.ts \u4e2d\u6dfb\u52a0\u914d\u7f6e  </p>\n</blockquote>\n<pre><code>server: {\n    host: '0.0.0.0'\n}\n</code></pre>\n<p>\u6dfb\u52a0\u540e\u547d\u4ee4\u884c\u663e\u793a   </p>\n<pre><code>  &gt; Network:  http://192.168.52.1:3000/ \n  &gt; Network:  http://192.168.142.1:3000/\n  &gt; Local:    http://localhost:3000/    \n  &gt; Network:  http://172.17.12.99:3000/\n</code></pre>\n<p>\u53ef\u6b63\u5e38\u8bbf\u95ee</p>\n<h1>\u914d\u7f6e Eslint standard \u89c4\u5219</h1>\n<p><em>\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</em><br/>\n<em>\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</em></p>\n<p>\u9700\u8981\u5b89\u88c5\u7684\u5305</p>\n<pre><code>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</code></pre>\n<p>\u5404\u5305\u8bf4\u660e</p>\n<pre><code>//\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</code></pre>\n<p>\u6dfb\u52a0.eslintrc.js \u6587\u4ef6</p>\n<pre><code>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</code></pre>\n<p><strong>\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</strong></p>\n<p>vue3 &lt;script setup lang=\"ts\"&gt; \u5199\u6cd5\u4e2d\u4e0d\u9700\u8981\u5f15\u5165 defineProps \u5373\u53ef\u4f7f\u7528<br/>\n\u4f46\u662f eslint \u4f1a\u62a5\u9519\n\u9700\u8981\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u6dfb\u52a0\u914d\u7f6e</p>\n<pre><code>env: {\n    node: true,\n    'vue/setup-compiler-macros': true  ++\n  },\n</code></pre>\n<p>\u4e4b\u540e\u53d1\u73b0\u65b0\u95ee\u9898<br/>\n\u53d1\u73b0 standard \u8bed\u6cd5\u89c4\u5219 vscode \u4f1a\u62a5\u7ea2 \u4f46\u662f\u8fd0\u884c\u4e0d\u4f1a\u62a5\u9519<br/>\n\u53d1\u73b0\u662f vite.config.ts \u4e2d eslintPlugin({ include: []}) \u53ea\u5199\u4e86 js  \u5c06 ts \u8865\u4e0a\u5c31\u597d\u4e86</p>\n<h1>@ \u6307\u5411 src</h1>\n<p>\u5728 vite.config.ts \u4e2d\u914d\u7f6e</p>\n<pre><code>  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</code></pre>\n<p>\u6ca1\u6709 path \u9700\u8981\u5f15\u5165 <code>import path from 'path'</code><br/>\n\u5982\u679c path \u62a5\u5f15\u5165\u9519\u8bef  \u9700\u8981\u5728 tsconfig.node.json \u4e2d \u6dfb\u52a0</p>\n<pre><code>\"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true\n}\n</code></pre>\n<p>\u5982\u679c\u662f ts \u9879\u76ee \u8fd8\u9700\u8981 <code>yarn add @types/node -D</code><br/>\n\u540c\u65f6\u5728 config.json \u4e2d\u6dfb\u52a0</p>\n<pre><code>\"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    }\n}\n\n</code></pre>\n<h1>\u73af\u5883\u53d8\u91cf</h1>\n<h1>vue-router</h1>\n<p><code>yarn add vue-router@4</code> </p>\n<h1>css \u9884\u5904\u7406\u5668</h1>\n<p><code>npm add -D stylus</code>\n<a href=\"https://cn.vitejs.dev/guide/features.html#css-pre-processors\" rel=\"nofollow\">\u5b98\u7f51\u8bf4\u660e</a><br/>\nVite \u4e5f\u540c\u65f6\u63d0\u4f9b\u4e86\u5bf9 .scss, .sass, .less, .styl \u548c .stylus \u6587\u4ef6\u7684\u5185\u7f6e\u652f\u6301\u3002<br/>\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<br/>\n\u5f15\u5165\u5168\u5c40\u5219\u9700\u8981 <code>yarn add stylus-loader -D</code></p>\n<p>\u5f15\u5165\u5168\u5c40\u6837\u5f0f\u5728 vite.config.ts \u4e2d\u6dfb\u52a0</p>\n<pre><code>css: {\n    preprocessorOptions: {\n      stylus: {\n        imports: [\n          path.resolve(__dirname, './src/assets/stylus/reset.styl')\n        ]\n      }\n    }\n  }\n</code></pre>\n<h1>\u6253\u5305 GZIP \u538b\u7f29</h1>\n<p><code>yarn add vite-plugin-compression -D</code>\n\u5728 vite.config.ts \u4e2d\u5f15\u5165 <a href=\"https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md\" rel=\"nofollow\">\u914d\u7f6e\u8bf4\u660e</a></p>\n<pre><code>import viteCompression from 'vite-plugin-compression'\nexport default defineConfig({\nplugins:\n  [\n    viteCompression({ threshold: 100 * 1000 })\n  ]\n})\n</code></pre>\n<h1>\u8def\u7531+transition</h1>\n<p>transition \u5185\u5fc5\u987b\u53ea\u6709\u4e00\u4e2a\u6839\u5143\u7d20</p>\n<h1>\u81ea\u52a8\u5f15\u5165\u6587\u4ef6\u5939\u5185\u6587\u4ef6</h1>\n<p>\u5728\u4e4b\u524d package \u6253\u5305\u6a21\u5f0f\u4e0b<br/>\n\u63d0\u4f9b\u4e86 require.context \u6765\u8fdb\u884c\u6587\u4ef6\u5939\u904d\u5386\u5bfc\u5165\u529f\u80fd<br/>\n\u6211\u4eec\u5728\u81ea\u52a8\u5bfc\u5165 store \u4e2d\u7528\u5230\u4e86</p>\n<p>\u5728 vite \u4e2d \u6ca1\u6709 require.context \uff0cvite \u63d0\u4f9b\u4e86 <a href=\"https://vitejs.cn/guide/features.html#glob-import\" rel=\"nofollow\">import.meta.glob</a> \u8fdb\u884c\u5bfc\u5165</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/taowen", 
        "name": "taowen", 
        "avatar": "https://cdn.v2ex.com/avatar/ce10/b998/45858_large.png?m=1647230113"
      }, 
      "url": "https://www.v2ex.com/t/850995", 
      "title": "How to use Vite to build all kinds of TypeScript projects, including CSR/SSR/CDN/MonoRepository", 
      "id": "https://www.v2ex.com/t/850995", 
      "date_published": "2022-05-05T09:55:31+00:00", 
      "content_html": "<p><a href=\"https://github.com/taowen/vite-howto\" rel=\"nofollow\">https://github.com/taowen/vite-howto</a></p>\n<p>\u8e69\u811a\u82f1\u6587\uff0c\u89c1\u8c05</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/qq309187341", 
        "name": "qq309187341", 
        "avatar": "https://cdn.v2ex.com/gravatar/c2a35b807352717b5b5636d565c82ee7?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/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": "https://www.v2ex.com/member/Leviathann", 
        "name": "Leviathann", 
        "avatar": "https://cdn.v2ex.com/gravatar/d3b22910a49ecf620ab67790d7f594eb?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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<br />\u6709\u7684\u914d\u7f6e\u8fd8\u548c rollup \u6709\u91cd\u53e0<br /><br />\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<br /><br />\u600e\u4e48\u624d\u80fd\u77e5\u9053 vite \u9ed8\u8ba4\u7684 rollup \u914d\u7f6e\u662f\u5565\uff1f\u5fc5\u987b\u770b\u6e90\u7801\u5417\uff1f<br /><br />\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<br /><br />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<br /><br />\u53e6\u5916\u5982\u679c\u60f3\u6307\u5b9a\u8f93\u5165\u548c\u8f93\u51fa\u7684 html \u6587\u4ef6\u540d\u53c8\u8be5\u600e\u4e48\u505a\uff1f<br /><br />\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": "https://www.v2ex.com/t/827185"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/devilte", 
        "name": "devilte", 
        "avatar": "https://cdn.v2ex.com/avatar/e5ef/96d1/527498_large.png?m=1640245187"
      }, 
      "url": "https://www.v2ex.com/t/816007", 
      "date_modified": "2021-11-17T05:04:34+00:00", 
      "content_html": "<p>\u524d\u7aef\u9879\u76ee\uff0c\u6280\u672f\u6808\u662f Vue3.x + Vite + TypeScript</p>\n<p>\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:</p>\n<pre><code>TypeError: Right-hand side of 'instanceof' is not an object\n</code></pre>\n<p>\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</p>\n<pre><code> template:\n&lt;div class=\"graph\" ref=\"graphRef\" id=\"graphRef\"&gt;&lt;/div&gt;\n\nscript:\nconst graphRef = ref&lt;HTMLElement | null&gt;(null);\n</code></pre>\n<p>\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<a href=\"https://imgtu.com/i/I4YiC9\" rel=\"nofollow\"><img alt=\"I4YiC9.png\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://z3.ax1x.com/2021/11/17/I4YiC9.png\"/></a></p>\n<p>\u73b0\u5728\u95ee\u9898\u5c31\u662f\u4e0d\u77e5\u9053 <strong>\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</strong>\u6c42\u89e3</p>\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": "https://www.v2ex.com/t/816007"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/XTTX", 
        "name": "XTTX", 
        "avatar": "https://cdn.v2ex.com/avatar/1d7d/8905/477613_large.png?m=1586326604"
      }, 
      "url": "https://www.v2ex.com/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.<br /><br />Vite + React + Typescript + Eslint + Airbnb eslint rules + Airbnb Typescript rules + Prettier + env variable import + Absolute Import Path<br /><br /><br /><a target=\"_blank\" href=\"https://github.com/jt6677/vite_ts_eslint_prettier_aribnbts\" rel=\"nofollow noopener\">https://github.com/jt6677/vite_ts_eslint_prettier_aribnbts</a><br /><br />==============================================<br />!yes, tons of setup and config files.<br /><br />==============================================<br />env variable import:<br /><br />    You need to add type in env.d.ts like \"readonly VITE_ANYTHING: string\"<br />    variables MUST start with VITE_<br />    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)<br /><br />==============================================<br />Absolute Import Path<br /><br />    import App from \"~/components\". ~/ is the absoulte path, equal to ./src<br /><br />==============================================<br />reverse Proxy in vite.config.ts", 
      "date_published": "2021-11-13T07:47:39+00:00", 
      "title": "Vite+React+TS+Eslint+Prettier starter kit", 
      "id": "https://www.v2ex.com/t/815145"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/oligi", 
        "name": "oligi", 
        "avatar": "https://cdn.v2ex.com/avatar/44a2/beec/492604_large.png?m=1767841038"
      }, 
      "url": "https://www.v2ex.com/t/776391", 
      "date_modified": "2022-03-08T06:23:04+00:00", 
      "content_html": "<ol>\n<li>\u5c24\u5927\u65b0\u51fa\u7684 vitepress \u636e\u8bf4\u6bd4 vuepress \u66f4\u597d\uff0c\u6240\u4ee5\u60f3\u8bd5\u8bd5</li>\n<li>\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</li>\n</ol>\n", 
      "date_published": "2021-05-12T02:07:27+00:00", 
      "title": "VitePress \u5982\u4f55\u521b\u5efa\u81ea\u5b9a\u4e49\u7684 UI \u4e3b\u9898", 
      "id": "https://www.v2ex.com/t/776391"
    }
  ]
}