标签: vite
Vite 服务器正在运行，但无法在本地主机上运行
Vite + Reactjs 服务器正在运行，但我得到\n“无法找到此本地主机页面\xe2\x80\x99\n找不到该网址的网页：https://localhost:4200/”\非浏览器
\n推荐指数
解决办法
查看次数
如何在生产环境中包含 Vite 中 node_modules 的 CSS？
我有一个 typescript Web 应用程序，其中包含来自其 NPM 依赖项的 CSS 文件，如下所示：
<link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css" />
将 vite 添加到我的项目后，它可以在开发模式 ( vite) 下工作，因为它提供来自我的开发文件夹的内容，其中存在 node_modules 的路径。但是，这会在生产 ( vite build) 或预览模式 ( ) 中中断，在生产模式 ( ) 或预览模式 ( vite preview) 中，它会在另一个文件夹中提供，并且 node_modules 文件夹不会包含在输出中。
我的旧工作流程仅npm install在 Web 服务器上，因此它的所有依赖项都在 node_modules 文件夹中，但这不适用于 Vite 捆绑的应用程序。
我查阅了手册，包括https://vitejs.dev/guide/features.html#css但手册中的所有示例都涉及使用 PostCSS、React、Vue、tailwind、SASS 等框架和库的人。但是我没有使用任何这些技术。
如何让 Vite 将来自 NPM 依赖项的 CSS 文件包含在一个简单的打字稿应用程序中，该应用程序由 ES6 模块组成，没有任何框架？
手册说了一些关于导入的内容，但我不明白，如何以及在哪里导入CSS，在index.html中还是在模块中？
推荐指数
解决办法
查看次数
如何设置vite（预览）生产端口？
我一直在寻找如何为 vite 设置生产端口，但我找不到尝试此 vite js 配置的方法
server: {
host: true,
},
preview:{
port:5005
}
但似乎行不通
推荐指数
解决办法
查看次数
为什么 Laravel Vite 指令在我的项目中不起作用？
我根据laravel给出的文档安装并配置了laravel Breeze和blade 。默认情况下它使用 Vite，但不知何故 @vite 指令在我的项目中不起作用，我不知道我错过了什么。
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/forms')],
};
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
]
});
vite 正在正确编译我的 js 和 css 资源：
然后，我使用指令创建了一个测试刀片模板@vite：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> …推荐指数
解决办法
查看次数
vite无法处理xxx.html文件
我有一个 Vue2 的 Vite 项目，它包含一个静态 html 文件。
\n喜欢关注
\nimport template from 'editor.html';\nexport default {\n template: template\n}\n当我运行时yarn dev，终端输出：
\n\nnode_modules/@gaoding/editor-framework/lib/base/editor.js:23:21：错误：没有为“.html”文件配置加载器：node_modules/@gaoding/editor-framework/lib/base/editor.html \n23 \xe2\x94\x82 从 './editor.html' 导入模板；
\n
我尝试在下面添加一些插件vite.config.ts，但所有这些都不起作用。
\n\n@rollup/插件-html
\n
\n\nrollup-插件-html
\n
\n\nrollup-插件-htmlvue
\n
我怎么解决这个问题。
\n推荐指数
解决办法
查看次数
如何在Vite+React项目中集成ESLint？
当我使用 Create React App 创建 React 应用程序时，默认情况下包含 ESLint。这就是为什么我们不想手动集成 ESLint。但是，当我使用Vite创建 React 应用程序时，不存在任何类型的 linting，如ESLint或JSLint。
如何在Vite+React项目中安装ESLint？
推荐指数
解决办法
查看次数
vite: 如何处理第三方模块中的“require”语句？
我使用一个带有“require”语句的 UI 库。
我可以使用vite成功运行开发模式。
但是当我构建并预览 dist 时，浏览器会失败：Uncaught ReferenceError: require is not defined，因为供应商块中有一些“require”语句。
我已经尝试过@rollup/plugin-node-resolve， @originjs/vite-plugin-commonjs 但它不起作用。
我该如何解决这个问题？
推荐指数
解决办法
查看次数
如何让 Vite 在每次更改时构建我的文件？
我试图让 Vite 构建我的文件，并dist在开发过程中每次保存/更改文件时将它们输出到文件夹中。
我该怎么做呢？
这是我的vite.config.development.js文件：
import { defineConfig } from "vite";
export default defineConfig({
base: "./",
build: {
rollupOptions: {
output: {
assetFileNames: "assets/[name].[ext]",
chunkFileNames: "assets/[name].[ext]",
entryFileNames: "assets/[name].js",
},
},
write: true,
},
});
这是我的脚本package.json：
"frontend-dev": "vite --config vite.config.development.js",
它执行通常的操作，但当我更改源代码时，localhost:3000它不会构建我的文件并将它们放入文件夹中。dist
目前，我每次都必须运行vite buildnpm 脚本，这需要很多时间。
推荐指数
解决办法
查看次数
如何设置vite.config.js基本公共路径？
我正在尝试为我的开发和生产环境设置一个基本 urlvitejs ，但配置未解析。
根据vitejs，您可以在配置选项中设置在开发或生产中提供服务时的基本公共路径。
当从命令行运行 vite 时，Vite 会自动尝试解析项目根目录中名为 vite.config.js 的配置文件。
问题是我的应用程序请求没有通过'http://localhost:8080/'，但仍然附加到默认服务端口http://localhost:3000/。
我当前的配置如下：
// vite.config.js
export default {
base: 'http://localhost:8080/'
}
// packages.json
{
"name": "vue3ui",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
...,
"vue": "^3.0.11"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"vite": "^1.0.0-rc.13"
}
}
推荐指数
解决办法
查看次数
Vue3 的 Vue 测试实用程序：文档未定义
我尝试根据以下内容引导一个简单的应用程序Vue3，，ViteVitest
我还安装了 vue 3 兼容版本的vue test utils来测试 vue 组件。
\n我在尝试复制文档中的基本示例时遇到错误：
\nimport { mount } from "@vue/test-utils";\nimport { expect, test } from \'vitest\'\n\n\n// The component to test\nconst MessageComponent = {\n template: "<p>{{ msg }}</p>",\n props: ["msg"],\n};\n\ntest("displays message", () => {\n const wrapper = mount(MessageComponent, {\n props: {\n msg: "Hello world",\n },\n });\n\n // Assert the rendered text of the component\n expect(wrapper.text()).toContain("Hello world");\n});\n\n FAIL src/tests/hello-world.test.ts > displays message\nReferenceError: document is not defined\n …推荐指数
解决办法
查看次数