Vue CDN及Vue-router CDN环境下HTML模板使用与报错处理

问题原因 #

• Vue 2.x 版本的组件模板要求必须有唯一的根元素，所以你要展示多个元素时，必须用<div>等标签将所有内容包裹起来作为唯一根节点。
• 你使用反引号的ES6模板字符串报错，是因为部分老旧浏览器或JS文件解析环境不支持ES6语法，反引号被识别为无效字符。

解决方案 #

方案1：字符串拼接写法（无需修改index.html，直接调整组件JS） #

把模板内容用普通字符串拼接，避免使用反引号，示例如下：

var Infopage = {
    template: '<div id="info_page">' +
                '<h1>This page is for information</h1>' +
                '<p>新增的段落内容</p>' +
                '<h2>第二个标题</h2>' +
                '<input type="text" placeholder="测试输入框">' +
              '</div>'
};

方案2：模板外置写法（更推荐，维护成本更低） #

第一步：在index.html的<body>标签内新增对应模板，用<template>标签包裹，设置唯一id：

<template id="info-page-template">
  <div id="info_page">
    <h1>This page is for information</h1>
    <p>新增的段落内容</p>
    <h2>第二个标题</h2>
    <input type="text" placeholder="测试输入框">
  </div>
</template>

第二步：修改info.js的组件配置，直接关联模板id即可：

var Infopage = {
    template: '#info-page-template'
};

这种写法不需要处理字符串拼接，也不会触发无效字符报错，后续要新增元素直接修改html里的template内容即可，更适合没有构建工具的CDN开发场景。

内容的提问来源于stack exchange，提问作者Luis Alcantara