前言：注释的艺术
在 Vue 开发中，我们经常需要在模板中添加注释。这些注释可能是：
- 开发者备注：解释复杂逻辑
- 代码标记：TODO、FIXME 等
- 模板占位符：为后续开发留位置
- 文档生成：自动生成 API 文档
- 设计系统标注：设计意图说明
但是，你可能会发现 Vue 默认会移除模板中的所有 HTML 注释！今天我们就来深入探讨如何在 Vue 中保留这些有价值的注释。
一、Vue 默认行为：为什么移除注释？
源码视角
// 简化版 Vue 编译器处理
function compile(template) {
// 默认情况下，注释节点会被移除
const ast = parse(template, {
comments: false // 默认不保留注释
})
// 生产环境优化：移除所有注释
if (process.env.NODE_ENV === 'production') {
removeComments(ast)
}
}
Vue 移除注释的原因：
- 性能优化：减少 DOM 节点数量
- 安全性：避免潜在的信息泄露
- 代码精简：减少最终文件体积
- 标准做法：与主流框架保持一致
默认行为演示
Hello World
编译结果：
Hello World
所有注释都不见了！
二、配置 Vue 保留注释的 4 种方法
方法1：Vue 编译器配置（全局）
Vue 2 配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return {
...options,
compilerOptions: {
comments: true // 保留注释
}
}
})
}
}
// 或 webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
comments: true
}
}
}
]
}
}
Vue 3 配置
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
comments: true // 保留注释
}
}
})
]
})
// 或 vue.config.js (Vue CLI)
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
comments: true
}
}
}
]
}
]
}
}
}
方法2：单文件组件配置（Vue 3 特有）
export default { // Vue 3 可以在组件级别配置 compilerOptions: { comments: true } }
方法3：运行时编译（仅开发环境）
// 使用完整版 Vue（包含编译器）
import Vue from 'vue/dist/vue.esm.js'
new Vue({
el: '#app',
template: `
Hello
`,
compilerOptions: {
comments: true
}
})
方法4：使用
本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/17079.html
