vue 萌新求助，关于 template 的一个小问题

2020-05-21 00:20:19 +08:00
 asanelder

有如下两个文件

index.html

<html>
	<head>
		<title>Vue Hello World</title>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

main.js

import Vue from 'vue';

new Vue({
	el: '#app',
	template: "<p> test <p>"
});

使用 webpack 打包后，在浏览器中运行，结果是这样的

<html>
	<head>
		<title>Vue Hello World</title>
	</head>

	<body>
		<div id="app"></div>
    	<script src="main.js"></script>
	</body>
</html>

并没有替换到

，不明白啊，求大神指点！！！！
1043 次点击
所在节点    问与答
12 条回复
troycode
2020-05-21 08:42:48 +08:00
页面里需引用 <template></template>
SilentDepth
2020-05-21 09:45:27 +08:00
你的代码看起来没啥问题。控制台里没有异常吗？
asanelder
2020-05-21 10:53:31 +08:00
@SilentDepth 没有任何异常，通过浏览器的 devtools 工具来查看的话，div element 没有了
asanelder
2020-05-21 10:56:47 +08:00
@troycode 大神请明示啊，在哪里加呢。。。
SilentDepth
2020-05-21 11:30:27 +08:00
我刚注意到你的 template 写错了，<p> 的关闭标签 = =|||
asanelder
2020-05-21 12:35:19 +08:00
@SilentDepth 感谢回复啊，我找到原因了。

主要是 webpack 最后打包成的 bundle.js 不包含 vue-compile, 所以 template: '<p> test </p>' 是不起作用的。

要想起作用，需要使用 SFC 或者 render 函数。
SilentDepth
2020-05-21 12:39:16 +08:00
不是啊，我试了下 <p>test</p> 是可以正常编译的
asanelder
2020-05-21 12:51:19 +08:00
@SilentDepth 你的 webpack 文件？ 你在浏览器中打开 html,显示 test 么？
SilentDepth
2020-05-21 14:28:53 +08:00
本地又试了下，确实是不行（刚才在 CodeSandbox 上试的，可以正常编译）
ghosthcp516
2020-05-21 15:22:33 +08:00
vue.runtime.js 没有 template 编译相关的代码，不能直接写 template，vue.js 才行。
ghosthcp516
2020-05-21 15:24:32 +08:00
@ghosthcp516 即便使用了 vue-template-compiler， 也只能在.vue 文件中写 template， .js 文件就爱莫能助了
asanelder
2020-05-21 18:32:13 +08:00
@ghosthcp516 差不多是这个意思，看我 6 楼的回复

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/673821

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX