问题标签 [vueify]

我刚刚开始使用 Vue.js，这是我第一次尝试使用 Vueify 和 Browserify。我制作了这个简单的组件来从 Json 生成一个表格，但是我的组件应该显示的 div 是空的，我没有收到任何错误，并且 Vue 开发工具扩展显示了我的 Json 以及所有正确的数据。我可能在这里做一些非常愚蠢的事情，但我看不到它......

我的 index.html：

人物角色.vue：

开始.js：

包.json：

显示空 DIV 的控制台

Vue devtools 显示我的 Json

好的，所以我一直在尝试用 browserify 和 vueify 编译东西，我偶然发现了一些奇怪的东西。因此，首先，我一直在尝试让此处找到的 browserify-simple 示例正常工作。

我已经进行了设置，并且能够编译并使事情正常工作。但是，我决定尝试将 browserify-shim 添加到该批次中，以避免将 vue.js 库嵌入到最终代码中。

这就是事情变得有点奇怪的地方。这是我的 package.json 文件的功能版本。其中大部分已经在示例中出现，我只添加了必要的配置以使 browserify-shim 工作：

正如我所说，这行得通。另一方面，如果我在 package.json 中执行此操作：

如果我像这样修改 main.js 文件：

编译时出现以下错误：

错误：无法从“C:\wamp\www\VueTest\src”中找到模块“vue”

谁能告诉我为什么会这样？除了导入我想要的库之外，我认为我放在 browserify-shim 部分中的名称并不重要。

是否可以通过这种方式设置 vueify，以便将单个 .vue 文件编译为相应的 .js 文件？

例如：

输入：my-component.vue

输出：my-component.js

完全披露：我在消除 npm 和 node 时打开了一个与此非常相似的问题。您可以在以下位置找到该问题：npm i 和 npm update Breaking gulp, browserify builds。尽管与此问题有些相似，但该问题的根源在构建堆栈中较低，并诊断出一个相关但不相同的问题。请不要将此标记为重复！

你期待会发生什么？

gulp 将 vue.js 组件转换为函数式 JS

究竟发生了什么？

运行gulp contacts会导致捆绑包不完整，这会导致 Chrome 出现错误：

在火狐中：

这仅发生在单个组件中（这是项目的新组件），并且仅在const Axios = require('axios');存在时发生。

注释或删除该行允许构建成功完成。没有其他具有此行的组件受到影响。

使用时也会出现这种情况import Axios from 'Axios';。

文件构建不正确的第一个主要指标是包的行数。一个正确构建的包通常超过 11k LOC，而不管预编译 LOC 的数量是多少。这个特定的捆绑包大约是 1,100 LOC。

以下是在 devtools 中查看源代码时触发错误的示例：

环境：

代码和配置：

包.json

gulpfile.js

尝试的补救措施：

我试过了：

跑步：

npm update

将 node 和 npm 升级到最新版本。

debug: false在 browserify 调用中设置

从生产系统和从事同一项目的两个独立同事复制已知的工作 package.json 和 package-lock.json。使用已知的工作包*.json 文件，我运行rm -rf node_modules, npm cache clear --force, npm install, 并收到相同的结果。

根据 gulp 的文档查看了常见问题及其修复页面

创建了一个完全独立的、简单的目录来模仿受影响项目的结构，并且错误仍然存​​在。

与 npm 团队合作以消除节点或 npm 作为问题的潜在来源——我们将其缩小为 gulp 或 gulp 插件问题。

我还咨询了 Vue.js 支持团队，他们也同意这是 gulp 或 gulp 插件的问题。

这个问题最奇怪的部分是它影响了单个新组件，该组件与 30 多个同样导入或需要 Axios 的其他组件在同一构建任务中。任何帮助将不胜感激！

资料来源：

Gulp Browserify SourceMaps

吞咽，browserify，地图？

Gulp Browserify SourceMaps

node sass 版本 3.5.3 正在破坏构建

Gulp 生成的源映射在 Chrome 中不起作用

Gulp Sass with errLogToConsole: true 仍然停止我的其他监视任务

获取：SyntaxError: missing ) 在参数列表之后但无法找出 hulpfile.js 有什么问题

https://github.com/gulpjs/gulp/issues/2065

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes

我试图在我的 Vue 项目中获取选择字段的值。我已经尝试了几件事，但我仍然有链接的一些事情是：

• https://codepen.io/johnjleider/pen/jwoNrG
• 使用 JavaScript 在下拉列表中获取选定值？

我仍然无法获得值选择。无论如何我可以在 FormData 对象中捕获选定的值吗？我认为这将使它最容易抓住。

在模板中：

在脚本中我尝试了多种方法但仍然没有结果：

有没有我错过的最佳实践？任何帮助/建议将不胜感激。

更新：我忘了包括我确实尝试在数据中设置v-model="selectedOption"但selectedOption仍然无法获得值：

但是，当我记录 selectedOption 表单时，我的表单提交功能没有定义？console.log(self.selectedOption);

我有一个场景，当我更新服务器中的整个应用程序（包括后端 API）时，用户需要重新加载 vuejs 应用程序以获取最新的 vue 应用程序版本。

假设用户有可能使用已经投入生产的 vue 应用程序 1.1 版，即使在服务器更新后（即到 1.2）仍将继续使用相同的版本。在这种情况下，后端 API 可能已更改并且会中断。

解决上述问题的任何简单的方法/方法？

我有以下 gulpfile.js：

以及以下 package.json 依赖项：

由于我试图最小化我的示例，因此可能存在一些示例不需要的依赖项。

我的 main.js 以以下代码行开头：

如果我要运行 gulp 任务vue，它会以以下输出结束：

可以说，babelify 似乎没有运行成功，因为在.bundle()调用方法时会抛出异常。

我错过了一些基本的东西吗？

在一个应用程序中，我使用browserify和vueify。我正在尝试将全局 scss 文件（带有变量、mixins、颜色等）注入 Vue 以使其可用于所有组件（而不是在每个组件中显式导入文件）。

我在路径 public/app/styles/main.scss 有以下 main.scss：

在 gulp.js 文件中，我有以下内容：

这是我尝试使用全局定义的 scss 变量的 App.vue 组件：

但我收到以下错误：

我究竟做错了什么？

我正在使用 Gulp、Browserify、Vueify 和 Babel 来构建我的 vue.js 项目。我不能移动到另一个建筑系统，所以 Gulp 就是这样。我最近从 Babel 6 更新到 Babel 7，因为我的项目中新增了一个：Jest 和单元测试（Babel 7 是必需的）

不幸的是，这有一个副作用 Vueify 停止与 Babel 7 一起工作，因为它们似乎不兼容，或者其他什么。Npm Vueify 包已经 2 年没有更新了，我发现了一个没有人正式评论的git 问题。

有没有人遇到并解决过同样的问题？Vueify的任何替代品？谢谢

我正在尝试将 Vue 单文件组件与 Gulp 构建系统一起使用。

Gulp 应该使用 Vueify 和 Babel 转换文件，但它们都没有转换箭头函数。

包.json

gulpfile.js

我的页面.vue

myPage.min.js 中的输出

请注意箭头函数没有被转换。