时间戳

首页 > 解决方案 > vue模板不能注入相关标签

javascript - vue模板不能注入相关标签

问题描述

我用webpack搭建了一个简单的vue项目，这里是三个文件

索引.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.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

浏览器中显示的是什么

<html>
   <head>
      <title>Vue Hello World</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="main.js"></script>
   </body>
</html>

模板不替换标签，我不知道为什么。任何人都可以帮忙吗？

标签： javascriptvue.jswebpack

解决方案

Vuejs 仅在运行时将内容注入#app，而不是在编译时。除非你确实在做 SSR。

使用 devtools 检查器检查 DOM，因为页面的源代码不会更改。

推荐阅读