标签: vite

我正在尝试使用 Laravel 9 和 ReactJS 以及 vite js 构建一个应用程序。我尝试按照以下命令进行构建。

npm 运行开发

但我收到以下错误，

获取http://[::1]:5173/resources/css/app.css net::ERR_CONNECTION_REFUSED

获取http://[::1]:5173/@vite/client net::ERR_CONNECTION_REFUSED

获取 http://[::1]:5173/resources/js/app.jsx net::ERR_CONNECTION_REFUSED

获取http://[::1]:5173/@react-refresh net::ERR_CONNECTION_REFUSED

Vite 默认不允许在 .js 文件中使用 JSX 语法。

我已经将我的文件重命名为.jsx（或.tsx)，但我有无法重命名的外部依赖项。

Vite 的错误示例：

\xe2\x9c\x98 [ERROR] The JSX syntax extension is not currently enabled\n\n    node_modules/somelib/src/someFile.js:122:11:\n      122 \xe2\x94\x82     return <div/>\n

如何配置 Vite 支持所有 .js 文件中的 JSX 表达式？

PhpStorm / WebStorm 尚不支持 Vite，因此给出以下 Vite 配置：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
});

它无法正确识别以下导入：

import { getAllItems } from '@/api'

如何设置才能正常工作？

有没有办法阻止 Vue3 中单字视图名称的 ESLint错误？

每次运行 ESLint 时，我都会收到以下消息：

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names\n

我目前有这样的设置：

文件结构：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Menu.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 env.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 About.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Home.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n

.eslintrc：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 …

我想通过 vite 创建多个库，所以我首先尝试“rollupOptions”。喜欢，

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        "qy-viewer": 'src/qy-viewer.ts',
        "qy-swiper": 'src/qy-swiper.ts'
      }
    }
  }
})

但这会产生有趣的结果，包括类似散列的字符串，例如qy-swiper.f3fc032d.js.
这是没有用的，所以我放弃了这个方法。

接下来我尝试准备多个 vite 配置文件。喜欢，

vite.qy-swiper.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/qy-swiper.ts',
      name: 'QySwiper',
      fileName: (format) => `qy-swiper.${format}.js`
    },
    rollupOptions: {
    }
  }
})

vite.qy-viewer.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/qy-viewer.ts',
      name: 'QyViewer',
      fileName: …

Vite默认在源码目录下生成文件dist。

my-app/\n\xe2\x94\x9c\xe2\x94\x80 node_modules/\n\xe2\x94\x9c\xe2\x94\x80 dist/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 assets/\n|  |    | index.js\n|  |    | index.css        \n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80 main.js\n\xe2\x94\x9c\xe2\x94\x80 style.scss\n\xe2\x94\x9c\xe2\x94\x80 package.json\n

我需要为js和css下的文件创建一个不同的文件夹assets。换句话说，我需要分别将js和cssfiler 放在/assets/js和/assets/css文件夹下。

my-app/\n\xe2\x94\x9c\xe2\x94\x80 node_modules/\n\xe2\x94\x9c\xe2\x94\x80 dist/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 assets/\n|  |    |-js/\n|  |    |   index.js\n|  |    |-css/\n|  |    |  index.css  \n

这是我的配置文件。

import { defineConfig } from "vite";\nimport react from "@vitejs/plugin-react";\nimport svgrPlugin from "vite-plugin-svgr";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  base: "./",\n  plugins: [react(), svgrPlugin()],\n …

我正在尝试将现有项目更新为 vite，但我在文档中读到 Vite 需要一个 index.html 文件来工作。是否有指定 vite 应该构建的另一个文件名？就我而言 main.html

Taylor Otwell 宣布新的 Laravel 项目现在将与 Vite 一起运行，并且默认安装 Vite。我似乎无法运行开发环境npm run dev

我安装了新的 laravel 项目，安装了带有 SSR 的 Laravel JetStream，并且团队支持点击了“npm install 命令”。

每次我运行npm run dev它都会显示：

如果我打开本地链接，它会显示以下内容：

为什么我无法使用npm run dev和编译我的文件？

这是我全新的 Laravel 应用程序的 package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0", …

create-react-app我有一个使用with创建的项目Typescript。我正在用作yarn 3.3.0包管理器。

现在我正在尝试从craswebpack转向vite. 我已经使用该yarn create vite命令启动了一个项目。只需将前一个项目中的组件复制并粘贴到新项目中即可。

当我在命令行上运行时，yarn tsc我没有遇到任何错误。

在终端中运行也yarn dev正常，服务器启动成功。

但是，在浏览器中，我在终端上遇到一个奇怪的错误，其中显示：

Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3)

最近，我在 React v18 中启动了一个新项目，它使用 Vite v4.1.1 作为构建工具。安装一些库后，应用程序的初始加载（运行后npm run dev）需要几分钟的时间，即使 Vite 本身会在几秒钟内启动。之后，HMR 工作正常，并且每个更改都会很快反映出来。我注意到某些依赖项需要 1-2 分钟才能获取（在网络选项卡中）。

网络选项卡

在这张图中，一些依赖项是从缓存加载的，但如果不是，react-router、mantime 或 React-query 可能需要一分钟多的时间来加载每个依赖项。这里的主要问题似乎是React应用程序的主要文件，我对此了解得更少。

有人可以解释为什么需要这么长时间以及如何缩短启动时间吗？我看到这可能与预捆绑有关，但在最近的项目中，我的表现并没有这么差。

我的部门：

      "@emotion/react": "^11.10.5",
      "@mantine/carousel": "^5.10.3",
      "@mantine/core": "^5.10.3",
      "@mantine/hooks": "^5.10.3",
      "@tanstack/react-query": "^4.24.4",
      "axios": "^0.27.2",
      "embla-carousel-react": "^7.0.9",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-router-dom": "^6.8.1",
      "tabler-icons-react": "^1.56.0"

和开发部门：

      "@types/react": "^18.0.27",
      "@types/react-dom": "^18.0.10",
      "@types/styled-components": "^5.1.26",
      "@typescript-eslint/eslint-plugin": "^5.34.0",
      "@typescript-eslint/parser": "^5.34.0",
      "@vitejs/plugin-react": "^3.0.1",
      "@vitejs/plugin-react-swc": "^3.1.0",
      "autoprefixer": "^10.4.13",
      "eslint": "^8.22.0",
      "eslint-config-airbnb": "^19.0.4",
      "eslint-config-airbnb-typescript": "^17.0.0",
      "eslint-config-prettier": "^8.5.0",
      "eslint-config-standard-with-typescript": "^22.0.0",
      "eslint-import-resolver-typescript": "^3.5.0",
      "eslint-plugin-import": "^2.26.0",
      "eslint-plugin-jsx-a11y": "^6.6.1",
      "eslint-plugin-prettier": "^4.2.1", …