vitejs / docs-cn Goto Github PK

1. 当我将静态资源（图片，字体）放在src的assets文件下，打包之后，所有css, js以及其他静态文件都会在dist的assets文件下。但是css中引用静态资源的路径却是"./assets/xxxx"，应当为“./xxxx”

2. 当我将静态资源（图片，字体）放在public文件下时，打包之后，css文件在dist的assets文件下，其他静态文件直接存在dist文件下。但是css中引用静态资源的路径却是"./xxxx"，应当为“../xxxx”

在文档中的 开始>index.html与项目根目录 章节中有这样一句话“你会看到它在整个文档中用 <root> 表示”
请问这个<root> 是不是指 <div id="root"> 还是其他含义？

//测试文件的路径： test/components/HelloWorld.spec.ts
import HelloWorld from '../../src/components/HelloWorld.vue'

当我使用vite创建vue3项目时，使用了可选链操作，代码如下


PC端浏览器是正常运行的

当我使用vite创建react时，使用可选链操作也会报错
我使用vue ui创建vue3项目时，就不会出现问题
这是我的依赖 vue3

这是我测试的react项目依赖

本 issue 讨论针对文档此处 ids 的意思做讨论。

• 应当是 ids 作缩写使用还是 id 的复数形式？

• 是否应当被意译为 “路径”？

有关vite ssr 中。比如我需要借助 三方的ui 插件来实现一些需求功能。
element-plus 中的 Cascader 级联选择器 不可以使用和其它小部分组件
和
naiveui 在ssr中的使用 任然遇到我们开发者无法解决的问题。
ssr 中在每个框架也好库的引入方式也好，都有自己的标准！！！

我想了解利用bot自动同步官方文档到指定分支，自动发起pr的技术细节，不是很清楚这个bot在哪，可以更详细描述一下工作流程吗？

"vite": "^2.1.5"，我在index.html中引入资源：
`<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

moment和lodash全局可用，但是显示红色波浪线，很不爽，显然是vscode找不到引用，请问如何处理？

看样子前者的翻译更好，语义更加清晰。

Thanks a lot for all the work to maintain this translation ❤️

There was a request to add a link from the main page to these docs

I discussed with @kiaking that is involved in the Japanase translation effort https://github.com/vuejs-jp/vite-docs-ja, and he told me that URLs are kept in English in their version. This is a good idea to enable us to link to translations directly from a given page, and not defaulting to the home page.

For the moment, I think we should add a link to the top of the docs that will go to the homepage

When you think that the translation is ready, it would be great to link both of them. Let me know if you would like me to create a PR to do that.

加载json报错
json文件：
；

把 json 改成 js 就好了

i dont know why[vite] Internal server error: PostCSS plugin vite-url-rewrite requires PostCSS 8.
Migration guide for end-users:

"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5",
"vue-router": "^4.0.10"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.4",
"@vue/compiler-sfc": "^3.0.5",
"vite": "^2.4.0"
}
dev 模式下 能显示路由里面的内容
build 以后 内容为空白了

npm run vite-dev error 'require is not defined'
const modulesFiles = require.context('./modules', true, /.js$/)

我在开发vue3+vite+ts时候，页面警告过多，就会卡死。

有没有计划开发环境增加watch模式

Info

• Safari Version 14.0
• macOS Mojave
• 英文环境

在本地 yarn dev 的时候出现了这样的问题：

我笔记本本地是英文环境，可能是这个原因？

Vite 同时利用 HTTP 头来加速整个页面的加载（再次让浏览器为我们做更多事情）：源代码模块的请求会根据是否更改，利用 304 Not Modified 协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 协商缓存，因此一旦被缓存它们将不会再次请求。

本人在使用vite 搭建的react-ts 的项目中，项目启动非常块，但是每当我启动好后，我在.tsx 文件中修改一些代码，浏览器并没有更新。刷新浏览器页面页没有生效。只有我重新 npm run dev 才会生效。目前我一直在寻找解决办法，苦于自己的英文是个二把刀。我的配置文件是这样的：
`import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()]
})
package.json 一开始的vite 是2.0.0的bata，目前是这样的："devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react-refresh": "^1.3.1",
"typescript": "^4.1.2",
"vite": "^2.0.1"
}
}`

希望看到的能留意一下我的问题，并且目前的解决方案是啥？ 感谢看到这个问题的。

var Re = void 0 !== ve.ResizeObserver ? ve.ResizeObserver : Ae
  , je = function(e) {
    b(r, n.exports.Component);
    var t = P(r);
    function r() {
        var e;
        return h(this, r),
        (e = t.apply(this, arguments)).resizeObserver = null,
        e.childNode = null,
        e.currentElement = null,
        e.state = {
            width: 0,
            height: 0,
            offsetHeight: 0,
            offsetWidth: 0
        },

拆分包以后报错Uncaught TypeError: Cannot read property 'exports' of undefined

1. yarn remove a module
2. yarn run dev
3. this is to show
   

it's not a bug but i think it's should be working whether or not it's in my node_modules

本次认领仅限之前参加过 vite 文档翻译的小伙伴，具体原因请参考 #77

由于文档内容有限，建议一人一篇。

在 review 过程中，请务必认真对待，逐行逐字对比。因为最近同步过程中，发现了很多错漏内容。

格式规范请务必遵循 wiki，减少不必要的返工。

review 后内容，请提交到 dev 分支。

任务认领说明

从 Todo List 中选取未被人领取过的文章：

未被领取过：

• guide/index

领取过：

• guide/index (@QC-L)

领取过，已完成：

• guide/index (@QC-L) #1

领取方式，在本 issues 下评论即可。

认领任务格式：

Section | Title | 译者 | 完成时间
-- | -- | -- | --
guide/index | 开始 | @QC-L | 2021.04.13 - 2021.04.13

示例效果：

任务认领列表

Todo List:

• blog
  • announcing-vite2 (@G233) #89
• config
  • index (@wjq990112) #80
• guide
  • api-hmr (@ShenQingchuan) #110
  • api-javascript (@ShenQingchuan)
  • api-plugin (@ShenQingchuan) #111
  • assets (@ShenQingchuan) #112
  • backend-integration (@ShenQingchuan) #113
  • build (@QC-L) #92
  • comparisons (@ShenQingchuan) #114
  • dep-pre-bundling (@ShenQingchuan) #116
  • env-and-mode (@ATQQ) #99
  • features (@Ivocin) #90
  • index (@ShenQingchuan) #117
  • migration (@QC-L) #119
  • ssr (@ShenQingchuan) #104
  • static-deploy (@Wzb3422) #91
  • using-plugins (@Ivocin) #120
  • why (@KnowsCount) #86
• plugins
  • index (@QC-L)

guide/build.md 第 9 行中写道：

一个轻量级的 动态导入 polyfill 也会同时自动注入。

我自己看这个翻译的时候就误会了，因为「动态导入 polyfill」听起来就像是「项目中所需要的 polyfill 会被自动地导入到项目中」，让我以为 Vite 会像 webpack 一样自动把所需要的 polyfill 导入到项目里。实际上，这里的「动态导入」指的是 ES6 里的一个特性。下文中也说了 polyfill 是不会自动导入的，所以我读文档的时候就纠结了很久。如果改成「对 import() 函数的 polyfill」或者「对动态导入这一特性的 polyfill」会不会更好？

怎样在css和js**享变量吗，webpack用:export{
menuText: $menuText;}这种形式导入的正常，vite导进来的变量成这样的":export {
}"，正确的应该是数组

node v12.19.0
vite 2.3.3

1. github地址：https://github.com/cmdparkour/vue-admin-box
2. 本地开发时好好的
3. 打包上线时，页面能打开，但是一旦进行跳转路由时，页面就会出现卡死现象
4. 线上地址：http://vue-admin-box.51weblove.com

@yyx990803

目前中文文档仓库已经建立完成，申请 https://cn.vitejs.dev 域名部署支持。

这是报错信息
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.
按理说，这里面的项不应该做较验的，因为即使校验，我们也没有修改的权限，所以这类提示不应该出现，主要是看着蛋疼

import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
const modules = import.meta.globEager('./src/baseCmpts/*.svelte')

// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte(), modules],
})

I have been participating in this the development of this repo recently, and there is one small thing that I observed: most of the pull requests opened only make fixes upon one single sentence or character. Whereas, alas, merging those pull requests would add two commits to the repo, which will, eventually, lead to a huge amount of commits. Therefore, I, for one, reckon it a better idea to open the discussion function or simply to open a issue for people to suggest fixes and changes. This way, one single commit from you could resolve many an issue. Moreover, @ShenQingchuan, formatting issues that took place in my pull request would be diminished #14 accordingly.

最近，我一直在参与这个 repo 的开发，并注意到了一件小事：大多数 PR 只对一个句子或一个字符进行修复。而合并这些拉取请求，则会给这个 repo 带来两次 commit，最终给这个 repo 带来一大堆 @commits。因此，我认为最好的办法是开放讨论功能，或者干脆开放一个问题，让大家提出修正和修改。这样一来，你那边一次 commit 就可以解决很多问题。另外，我之前那 PR （#14）中发生的格式化问题也会相应减少。

BTW 我用中文还是英文？

//测试文件的路径： test/components/HelloWorld.spec.ts
import HelloWorld from '../../src/components/HelloWorld.vue'

以前一直用的vue2环境和webpack，这次按照步骤install并启动开发服务器，出现以下问题
1.命令行启动错误（文件名、目录名或卷标语法不正确。），已全局安装vitepress解决该问题。
2.成功打开vite服务后，页面空白，console报错。


devDependencies增加vue：3.0.5后， 报错变更

现在打包的文件都会放入到dist->static目录中，如何配置，才能对文件归类呢？
像下面的图片这样

Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=4244fef3' does not provide an export named 'default'

safari控制台报错：SyntaxError: Unexpected token ','. Expected a ';' following a targeted export declaration.

期待 vite 文档中文化并愿为之做点力所能及的贡献。

how can I set the publicPath in runtime , just like webpack set webpack_public_path at the entry,
it is very important for me !

建了一个微信群供大家一起翻译讨论，原则上不接收不参与翻译的同学。

错误用图片完整的截出来了，这个是按照官网创建模板后安装依赖以后直接启动的

本项目由 @ShenQingchuan 同学牵头从 2021 年 2 月 5 日开始对官方文档 进行翻译工作，感谢 @ShenQingchuan 做出的巨大贡献，期间有 23 位同学先后对本仓库进行了贡献。
感谢 @QC-L 和 印记中文 @docschina-bot 帮忙将本项目同步模式从人工同步模式迁移到了自动化模式，详见 #51
2021-04-01 - 2021-04-05 完成了这项工作，非常感谢。

这次 PR 后，原有的 main 主干重命名为 history，由于 GitHub Repo 展示的 Contributors 是主干的 Contributors，导致过去在本仓库贡献过代码的同学从 Contributor 中消失了，目前的 Contributors 是这样的：

这样名字从 Contributors 中消失可能会给很多曾经贡献的同学造成心理伤害，故希望基于 sync-docs 分支拉一个新分支，各位曾经的 Contributors 认领部分文档，进行 PR，尽量保证名字回归到 Contributors 中。

附： Contributors （按照时间排序），如有遗留，请补充

• 旧巷馆子 · 沈青川
• beetaa
• Stephen
• iMaeGoo
• hezf
• KnowsCount
• Suyan
• Caper
• 炽翎
• luwuer
• Jingsong Gao
• Nyakku Shigure
• AtomLiu
• 清秋
• Mr.zhang
• Yang Mingshan
• Zeb Wu
• 云深
• okbug
• sugar
• iron
• QiChang Li

大佬们 请教一下，我比较菜

怎样在css和js**享变量吗，webpack用:export{
menuText: $menuText;}这种形式导入的正常，vite导进来的变量成这样的":export {
}"，正确的应该是数组

Uncaught (in promise) ReferenceError: buildModifiers is not defined
at index.esm.js:1
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:864)
at getter (runtime-core.esm-bundler.js:1958)
at reactiveEffect (reactivity.esm-bundler.js:42)
at doWatch (runtime-core.esm-bundler.js:2083)
at watch (runtime-core.esm-bundler.js:1937)
at Dl (index.esm.js:1)
at setup (index.esm.js:1)
at callWithErrorHandling (runtime-core.esm-bundler.js:154)

In the process of translation or proofreading, I found that there are many translated versions of a word，for instance,
"bundle": "打包，构建，捆绑，编译". So, I suggest we should specify a term translation convention, like vuejs 术语翻译约定

Here is some words I found we should specify

1. end-bundlers
2. unbundled:
3. built modules
4. no-bundle
5. pre-bundling
6. rebasing / public path rebase
7. first-class support

• bug 页面：https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
• 问题：
  
• 该链接跳转url多了一个 <wbr/>
• 英文文档同样存在该bug

"vite": "^2.1.5"，我在index.html中引入资源：
`<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

moment和lodash全局可用，但是显示红色波浪线，很不爽，显然是vscode找不到引用，请问如何处理？