为啥 vue.js 在 html 文件中不起作用？
Posted
技术标签:
【中文标题】为啥 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> 但不加载其内容。这可能是什么问题？
【问题讨论】：
【参考方案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以上是关于为啥 vue.js 在 html 文件中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章