如何使用 Rails 7 和 esbuild 设置 Vue.js

Question

我使用 esbuild 设置了一个新的 Rails 7 项目：rails new my_project -j esbuild

\n

然后我添加了 Vue.js 和yarn add vue.

\n

我可以看到 Vue 已成功添加到我的package.json文件中：

\n

{\n  "name": "app",\n  "private": "true",\n  "dependencies": {\n    "@hotwired/stimulus": "^3.0.1",\n    "@hotwired/turbo-rails": "^7.1.1",\n    "autoprefixer": "^10.4.5",\n    "esbuild": "^0.14.38",\n    "postcss": "^8.4.13",\n    "tailwindcss": "^3.0.24",\n    "vue": "^3.2.33"\n  },\n  "scripts": {\n    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",\n    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"\n  }\n}\n

\n

然后我添加import "./vue_controllers"到我的application.js文件中：

\n

// Entry point for the build script in your package.json\nimport "@hotwired/turbo-rails"\nimport "./controllers"\nimport "./vue_controllers"\n

\n

并将一些基本的 Vue.js 代码放入./vue_controllers/test.js：

\n

import Vue from \'vue\';\n\ndocument.addEventListener(\'turbo:load\', () => {\n  const element = document.getElementById(\'point\');\n  if (element != null) {\n    const app = Vue.createApp({\n      data() {\n        return { count: 1 }\n      },\n      created() {\n        alert(`count is: ${this.count}`)\n      }\n    })\n    const vm = app.mount(element)\n  }\n})\n

\n

当我使用 启动服务器时./bin/dev，出现以下错误：

\n

13:07:47 js.1   | \xe2\x9c\x98 [ERROR] Could not resolve "./vue_controllers"\n13:07:47 js.1   |\n13:07:47 js.1   |     app/javascript/application.js:4:7:\n13:07:47 js.1   |       4 \xe2\x94\x82 import "./vue_controllers"\n13:07:47 js.1   |         \xe2\x95\xb5        ~~~~~~~~~~~~~~~~~~~\n13:07:47 js.1   |\n13:07:47 js.1   | 1 error\n

\n

然后我尝试将文件放入其中./controllers。当我这样做时，我没有收到错误，但 js 文件没有被加载。

\n

我还尝试将文件重命名为./controllers/test_controller.js，但它仍然无法运行。

\n

我进行这种运行的唯一方法是将代码直接放入我的application.js文件中。当我这样做时，Vue 代码被执行，它所安装的对象被渲染一秒钟，然后消失。

\n

知道如何使用 Rails 7 和 esbuild 运行 Vue.js 代码吗？

\n

提前致谢

\n

Answer 1

我认为您遇到该错误是因为您尝试导入文件夹而不是文件。因此，如果您将组件放置在 中./vue_controllers/test.js，则应该将application.js文件更改为：

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import "./vue_controllers/test"