Vue组件/数据未呈现答案

【问题标题】：Vue component/data not renderingVue组件/数据未呈现
【发布时间】：2021-09-09 10:53:12
【问题描述】：

我有一个 python 项目（使用烧瓶），我试图在其中使用 Vue。问题是，如果我去查看 html 定义，没有任何与 vue 相关的渲染。我已经通过 npm 安装了 vue，还安装了 webpack 和 laravel-mix。它们似乎配置良好。

我有实例

import Vue from 'vue';
import alert from './components/Alert.vue';

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  data: {
    test: 'is it working?'
  },
  components: {
    alert
  }
});

组件

<template>
  <div class="alert" v-text="message"></div>
</template>

<script>
  export default {
    name: 'alert',
    data() {
      return {
        message: 'I am an alert.'
      };
    }
  };

</script>

<style>
  .alert {
    background: red;
  }

</style>

我只是想呈现消息

<div class="mdl-card__title mdl-color--primary mdl-color-text--white relative">
  <h2 class="mdl-card__title-text">Login</h2>
</div>

<div id="app">
  [[ test ]]
</div>

但是当我尝试查看 html 时，我什么也看不到。 Component not showing bellow the Login h2 tag

包.json

{
  "name": "I've hidden it",
  "version": "1.0.0",
  "description": "<h1>I've hidden it</h1>",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "repository": {
    "type": "git",
    "url": "i've hidden it"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "laravel-mix": "6.0.6",
    "postcss": "8.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

【问题讨论】：

控制台有错误吗？你安装了 Vue 开发工具吗？它检测到vue吗？您如何为 Vue 应用程序提供服务？你能显示你的 package.json 文件吗？为您的 vue 应用运行 start/serve/run 命令时是否会抛出任何警告/错误？
完全没有错误。我已经安装了 vue webtools 但它没有检测到任何 vue js。此外，我尝试使用 vue 脚本，即使使用它，devtools 似乎也没有在应用程序中找到 vue。我把package.json放在这里还有，我运行的时候也没有报错。
所以当您在终端中运行npm run development 时，它会显示您的 Vue 应用程序像往常一样在 localhost:8080 上运行？但是浏览localhost:8080时，vue devtools没有检测到vue？
没错。 Laravel mix 构建成功，控制台中没有弹出错误。没什么，只是在 localhost:8080 上运行。
你在 webpack.mix.js 中添加了mix.js('src/app.js', 'public/js').vue(); 吗？您是否将编译后的脚本./js/app.js 导入到您的html 中？ js 文件是否显示在浏览器的源选项卡中？

标签： vue.js vue-component

【解决方案1】：

在运行npm mix 时，laravel-mix 将编译你提供给mix.js 函数的文件，并将其保存到函数的第二个参数，即项目中的public/js 目录。 .vue() 告诉 laravel-mix 它是一个 vue 应用入口点。

编译后，您需要将编译好的脚本导入到您的 html 中。

<script src="public/js/main.js"/>

现在您的 Vue 应用程序应该可以正常工作了。

【讨论】：

好吧，我做到了，但它不起作用。控制台中弹出以下消息：GET http://localhost:8080/public/js/main.js net::ERR_ABORTED 404 (NOT FOUND)
请提供npm mix 的输出并告诉我们您的目录结构。
现在可以了！我的应用程序由于某种原因无法在 js 公用文件夹中找到主文件，但将编译后的脚本添加到 html 工作。
现在我知道为什么了。一旦它是 python 项目中的一个 wep 应用程序，就看不到 public 文件夹，因为它位于 web 应用程序的域之上
我怀疑，这就是我要求目录结构的原因。很高兴听到它起作用了。