File tree 2 files changed +28
-1
lines changed
2 files changed +28
-1
lines changed Original file line number Diff line number Diff line change 6
6
7
7
如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南。
8
8
9
- ## 手动配置
9
+ ## 手动设置
10
+
11
+ ### 安装
12
+
13
+ 你应该将 ` vue-loader ` 和 ` vue-template-compiler ` 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户:
14
+
15
+ ``` bash
16
+ npm install -D vue-loader vue-template-compiler
17
+ ```
18
+
19
+ ` vue-template-compiler ` 需要独立安装的原因是你可以单独指定其版本。
20
+
21
+ 每个 ` vue ` 包的新版本发布时,一个相应版本的 ` vue-template-compiler ` 也会随之发布。编译器的版本必须和基本的 ` vue ` 包保持同步,这样 ` vue-loader ` 就会生成兼容运行时的代码。这意味着** 你每次升级项目中的 ` vue ` 包时,也应该匹配升级 ` vue-template-compiler ` 。**
22
+
23
+ ### webpack 配置
10
24
11
25
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 ` vue-loader ` 应用到所有扩展名为 ` .vue ` 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:
12
26
@@ -72,3 +86,7 @@ module.exports = {
72
86
```
73
87
74
88
你也可以在[ 选项参考] ( ../options.md ) 查阅所有可用的 loader 选项。
89
+
90
+ ::: warning 警告
91
+ 如果你在开发一个库或多项目仓库 (monorepo),请注意导入 CSS ** 是具有副作用的** 。请确保在 ` package.json ` 中** 移除** ` "sideEffects": false ` ,否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。
92
+ :::
Original file line number Diff line number Diff line change @@ -92,3 +92,12 @@ sidebar: auto
92
92
- 默认值:` true `
93
93
94
94
在开发环境下,我们默认使用 [ prettier] ( https://prettier.io/ ) 格式化编译后的模板渲染代码,以方便调试。然而,如果你开发时碰到了 prettier 的某些罕见 bug,比如[ 格式化多层嵌套的函数时运行时间过长] ( https://github.com/prettier/prettier/issues/4672 ) ,你可以通过禁用这个选项来绕开。
95
+
96
+ ## exposeFilename
97
+
98
+ - 类型:` boolean `
99
+ - 默认值:` false `
100
+
101
+ 在非生产环境下,` vue-loader ` 会为组件注入一个 ` __file ` 属性以提升调试体验。如果一个组件没有 ` name ` 属性,Vue 会通过 ` __file ` 字段进行推断,并用于控制台警告中的展示。
102
+
103
+ 这个属性在生产环境构建时会被去掉。但如果你在开发一个组件库并且烦于为每个组件设置 ` name ` ,你可能还会想使用它。这时可以把这个选项打开。
You can’t perform that action at this time.
0 commit comments