File tree Expand file tree Collapse file tree 11 files changed +18
-18
lines changed Expand file tree Collapse file tree 11 files changed +18
-18
lines changed Original file line number Diff line number Diff line change 22
33When Vue Loader compiles the ` <template> ` blocks in SFCs, it also converts any encountered asset URLs into ** webpack module requests** .
44
5- For example, the following template snippet
5+ For example, the following template snippet:
66
77``` vue
88<img src="../image.png">
Original file line number Diff line number Diff line change 11# 介绍
22
33:::tip 版本注明
4- 这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅[ 迁移指南] ( ../migrating.md ) 。如果你正在使用老版本,其对应的就文档 [ 在此] ( https://vue-loader-v14.vuejs.org ) 。
4+ 这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅[ 迁移指南] ( ../migrating.md ) 。如果你正在使用老版本,其对应的文档 [ 在此] ( https://vue-loader-v14.vuejs.org ) 。
55:::
66
77## Vue Loader 是什么?
Original file line number Diff line number Diff line change 11# 处理资源路径
22
3- 当 Vue Loader 编译单文件组件中的 ` <template> ` 块时,它也会将所有遇到的资源 URL URL 转换为 ** webpack 模块请求** 。
3+ 当 Vue Loader 编译单文件组件中的 ` <template> ` 块时,它也会将所有遇到的资源 URL 转换为 ** webpack 模块请求** 。
44
5- 例如,下面的模板代码片段
5+ 例如,下面的模板代码片段:
66
77``` vue
88<img src="../image.png">
@@ -20,7 +20,7 @@ createElement('img', {
2020
2121默认下列标签/特性的组合会被转换,且这些组合时可以使用 [ transformAssetUrls] ( ../options.md#transformasseturls ) 选项进行配置的。
2222
23- 额外的 ,如果你配置了为 ` <style> ` 块使用 [ css-loader] ( https://github.com/webpack-contrib/css-loader ) ,则你的 CSS 中的资源 URL 也会被同等处理。
23+ 此外 ,如果你配置了为 ` <style> ` 块使用 [ css-loader] ( https://github.com/webpack-contrib/css-loader ) ,则你的 CSS 中的资源 URL 也会被同等处理。
2424
2525## 转换规则
2626
@@ -40,12 +40,12 @@ createElement('img', {
4040
4141## 相关的 Loader
4242
43- 因为像 ` .png ` 这样的文件不是一个 JavaScript 模块,你需要配置 webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去合理的处理它们 。通过 Vue CLI 创建的项目已经把这些预配置好了。
43+ 因为像 ` .png ` 这样的文件不是一个 JavaScript 模块,你需要配置 webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去合理地处理它们 。通过 Vue CLI 创建的项目已经把这些预配置好了。
4444
4545## 为什么
4646
4747转换资源 URL 的好处是:
4848
49- 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 ** 你可以就近管理图片文件,可以使用相对路径而不用担心布署时URL问题 ** 。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
49+ 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 ** 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题 ** 。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
5050
51- 2 . ` url-loader ` 允许你有条件将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 ` file-loader ` 处理。
51+ 2 . ` url-loader ` 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 ` file-loader ` 处理。
Original file line number Diff line number Diff line change 2121
2222如果找到了一个自定义块的匹配规则,它将会被处理,否则该自定义块会被默默忽略。
2323
24- 额外的 ,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个 ` *.vue ` 文件的组件会作为一个参数被这个函数调用。
24+ 此外 ,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个 ` *.vue ` 文件的组件会作为一个参数被这个函数调用。
2525
2626## Example
2727
Original file line number Diff line number Diff line change 11# CSS 提取
22
33:::tip 提示
4- 只有生产环境才会运用 CSS 提取,这有便于你在开发环境下进行热重载。
4+ 请只在生产环境下使用 CSS 提取,这有便于你在开发环境下进行热重载。
55:::
66
77## webpack 4
Original file line number Diff line number Diff line change 11# 函数式组件
22
3- 在一个 ` *.vue ` 文件中以单文件形式定义的函数式组件,现在在模板编译 、scoped CSS 和热重载也有了良好的支持。
3+ 在一个 ` *.vue ` 文件中以单文件形式定义的函数式组件,现在对于模板编译 、scoped CSS 和热重载也有了良好的支持。
44
55要声明一个应该编译为函数式组件的模板,请将 ` functional ` 特性添加到模板块中。这样做以后就可以省略 ` <script> ` 块中的 ` functional ` 选项。
66
Original file line number Diff line number Diff line change 11# 热重载
22
3- "热重载"不是当你修改文件的时候简单重新加载页面 。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换, ** 并且不需要刷新页面 ** 。它甚至保持应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
3+ "热重载"不只是当你修改文件的时候简单重新加载页面 。启用热重载后,当你修改 ` .vue ` 文件时,该组件的所有实例将在 ** 不刷新页面 ** 的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
44
55![ hot-reload] ( http://blog.evanyou.me/images/vue-hot.gif )
66
2828 * webpack 会压缩代码
2929 * ` process.env.NODE_ENV === 'production' `
3030
31- 你可以设置 ` hotReload: false ` 选项来显式关闭热重载 :
31+ 你可以设置 ` hotReload: false ` 选项来显式地关闭热重载 :
3232
3333``` js
3434module: {
Original file line number Diff line number Diff line change @@ -38,7 +38,7 @@ module.exports = {
3838}
3939```
4040
41- 额外的如果想 ` import 'style.scss' ` ,我们也可以在 Vue 组件中使用 SCSS:
41+ 现在,除了能够 ` import 'style.scss' ` ,我们还可以在 Vue 组件中使用 SCSS:
4242
4343``` html
4444<style lang =" scss" >
Original file line number Diff line number Diff line change @@ -33,7 +33,7 @@ module.exports = {
3333
3434拿 ` <style lang="less"> ` 举例:在 v14 或更低版本中,它会尝试使用 ` less-loader ` 加载这个块,并在其后面隐式地链上 ` css-loader ` 和 ` vue-style-loader ` ,这一切都使用内联的 loader 字符串。
3535
36- 这 v15 中,` <style lang="less"> ` 会完成把它当作一个真实的 ` *.less ` 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:
36+ 在 v15 中,` <style lang="less"> ` 会完成把它当作一个真实的 ` *.less ` 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:
3737
3838``` js
3939{
@@ -242,7 +242,7 @@ externals: nodeExternals({
242242
243243下列选项已经被改名了:
244244
245- - ` transformToRequire ` (现象改名为 ` transformAssetUrls ` )
245+ - ` transformToRequire ` (现在改名为 ` transformAssetUrls ` )
246246
247247下列选项已经被改为 ` resourceQuery ` :
248248
Original file line number Diff line number Diff line change @@ -50,7 +50,7 @@ sidebar: auto
5050- 类型:` boolean `
5151- 默认值:当 webpack 配置中包含 ` target: 'node' ` 且 ` vue-template-compiler ` 版本号大于等于 2.4.0 时为 ` true ` 。
5252
53- 开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确的将其关掉 ,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
53+ 开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确地将其关掉 ,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
5454
5555## hotReload
5656
You can’t perform that action at this time.
0 commit comments