时间戳

首页 > 解决方案 > 如何使用 webpack 在 vuejs 样板中编译新的源代码

javascript - 如何使用 webpack 在 vuejs 样板中编译新的源代码

问题描述

我想问你一些对我来说很困难的简单事情。它是关于基于 webpack 编译的 vuejs。

我是 vuejs 的新手，尤其是在这个样板中（https://github.com/chrisvfritz/vue-enterprise-boilerplate）。我想根据这个样板制作一个应用程序。

我安装了这个样板，然后添加了“vuetify”（响应式 GUI 插件）来制作一个应用程序。使用响应式 UI 并不容易，但最终他们一起工作。

显示 vue 和 vuetify 一起工作的图像

当我添加 vuetify 时，helloWorld.vue 也自动添加到 ./src/components 中，但它没有被编译（转译）所以每当我运行“yarn dev”来启动开发服务器时，我都会看到如下消息：

./HelloWorld 在 ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js? ?ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js&

我想知道如何编译 HelloWorld.vue 并将其包含在 app.js 等输出文件中。此外，将 HelloWordl.vue 移动到 ./src 也无法正常工作。

我只是想知道一些小提示。

提前致谢。六月，钟

标签： javascriptvue.jswebpackbabeljsvue-cli-3

解决方案

我找到了原因。

我在 app.vue 中添加了这样的语句

从 './components/HelloWorld' 导入 HelloWorld

它出错了（它必须是 ./components/HelloWorld.vue ）

我认为在没有扩展名的情况下导入组件是可以的。

推荐阅读