Vue 用 webpack 编译时用注释替换 HTML

编程入门行业动态更新时间:2024-10-11 23:21:31

本文介绍了Vue 用 webpack 编译时用注释替换 HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我面临的问题是，一旦我 import vue，vue 的包装元素(在我的例子中是 #app)将被以下注释替换

控制台中没有错误并且 webpack 编译得很好，但是我确实从 vue 的 mounted 方法中获取了控制台日志.

我的 index.html

<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档</title><身体><div id="应用程序"><h1>一些内容</h1>{{测试}}

webpack.config.js

const path = require('path');模块.出口 = {条目:'./src/app.js',输出: {文件名:'bundle.js',路径:path.resolve(__dirname, 'dist')}}

src/app.js

从'vue'导入Vueconst app = new Vue({el: "#app",数据: {测试:asdf"},安装(){console.log('挂载')}})

解决方案

您正在运行没有模板编译器的仅运行时构建.

查看vuejs/v2/guide/installation.html#网络包

您需要为 'vue' 创建一个别名，以便 webpack 从您的 node_modules/中包含正确的 vue/dist/*.js:

module.exports = {//...解决: {别名:{'vue$': 'vue/dist/vue.esm.js'}}}

另见 forum.vuejs/t/what-is-the-compiler-included-build/13239

I am facing the problem that once I import vue, the wrapper element for vue (in my case #app) will be replaced with the following comment

There is no error in the console and webpack compiles fine, I do however get the console log from vue's mounted method.

My index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1>some content</h1> {{test}} </div> <script src="dist/bundle.js"></script> </body> </html>

webpack.config.js

const path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }

src/app.js

import Vue from 'vue' const app = new Vue({ el: "#app", data: { test: "asdf" }, mounted() { console.log('mounted') } })

解决方案

You are running a runtime-only build without the template compiler.

Check out vuejs/v2/guide/installation.html#Webpack

You need to create an alias for 'vue', so webpack includes the correct vue/dist/*.js from your node_modules/:

module.exports = { // ... resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } }

See also forum.vuejs/t/what-is-the-compiler-included-build/13239

更多推荐

Vue 用 webpack 编译时用注释替换 HTML