为什么 vue.js 在 html 文件中不起作用？答案

【问题标题】：Why does vue.js not work inside html files?为什么 vue.js 在 html 文件中不起作用？
【发布时间】：2021-10-28 04:38:03
【问题描述】：

我想将 Vue.js 添加到我的 Spring Boot 应用程序中。即使一切看起来都很好，但我无法让 vue 组件工作。这是我的简单组件，MenuBar.vue：

<template>
    <div>
        Menu
    </div>
</template>

<script>
export default {
    name: "MenuBar"
}
</script>

这里是应该使用它的 HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
</head>
<body>
<div id="vueApp">
    <menu-bar></menu-bar>
</div>

<form th:action="@{/logout}" method="post">
    <div><input type="submit" value="Log out"/></div>
</form>
</body>
</html>

配置文件index.js：

import Vue from "vue";
import App from './App.vue'

Vue.config.devtools = true;

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

new Vue({
    el: '#vueApp'
})

components.js：

import Vue from 'vue';
import MenuBar from "./components/MenuBar";

Vue.component('menu-bar', MenuBar);

以及 webpack 配置文件：

// webpack.config.js
const {VueLoaderPlugin} = require('vue-loader');
const path = require('path');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    entry: {
        main: path.resolve(__dirname, './src/index.js')
    },
    resolve: {
        extensions: ['.vue', '.js'],
        alias: {
            'components': path.resolve(__dirname, './src/components/')
        }
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    devServer: {
        hot: false,
        liveReload: true,
        proxy: {
            "*": {
                target: 'http://localhost:8080',
                ignorePath: false,
                changeOrigin: false,
                secure: false
            }
        },
        port: 8081,
        host: "0.0.0.0"
    },
    output: {
        publicPath: '/dist/',
        path: path.resolve(__dirname, './src/main/resources/static/dist')
    }
}

当我构建 npm 并运行应用程序页面包含元素 <menu-bar></menu-bar> 但不加载其内容。这可能是什么问题？

【问题讨论】：

标签： vue.js npm webpack webpack-dev-server

【解决方案1】：

问题是您在<div id="vueApp"> 中添加了component：

<div id="vueApp">
    <menu-bar></menu-bar>
</div>

在这种情况下，您的应用会在此 <div id="vueApp"> 标记内呈现。您在 html 文件中的此标记内写入的所有内容都将被覆盖。

您还有另一个名为 App.vue 的文件。您应该将您的 MenuBar.vue 组件添加到这个主要组件中，它应该会显示出来。

编辑：让您的组件工作的最简单尝试

这是main.js：

import { createApp } from 'vue'
import App from './App.vue'

// Create app
const app = createApp(App);

// Import component
import MenuBar from "./components/MenuBar";

// Use MenuBar
app.component('MenuBar', MenuBar);

// Mount app
app.mount('#app')

这是App.vue：

<template>
  <div>
    <MenuBar></MenuBar>
    Body
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

这是MenuBar.vue：

<template>
  <div>
    Menu
  </div>
</template>

<script>
export default {
  name: "MenuBar"
}
</script>

由于我们有一个稍微不同的方法，我也会给你package.json，所以你可以点击npm install，它应该实现这个应用程序中包含的所有（少数）包：

{
  "name": "q68966956",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

您的项目似乎还处于早期阶段，所以也许您可以从该代码的稳定基础开始。如果对您有帮助，请告诉我。

【讨论】：

试过了。还是不行。恐怕我的配置有问题：/
@Bajor 我将获取您的代码并对其进行编辑，直到它运行为止。然后我会在我的答案中添加它。给我几分钟。
@Bajor 完成。希望对您有所帮助。
它无法为我构建：错误：规则只能有一个资源源（提供的资源和测试+包含
@Bajor 你需要先创建一个新项目。使用vue create Projectname