问题标签 [vue-loader]

我正在使用带有两个页面的Vue 路由器：

这很好用，除了我的每个组件都有不同的主体样式：

主视图.vue：

介绍视图.vue：

我的目标是让这两个页面具有不同的背景样式（最终在它们之间进行过渡）。但是在我去home路线（有red背景）的那一刻，然后单击intro路线，背景颜色保持不变red（我希望它变为pink）。

编辑： index.html：

如何使用 vue-loader 使用作用域 css 设置 v-html 内容的样式？

简单示例：component.vue

生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

生成CSS .info svg[data-v-9b8ff292] { fill: red; }

如您所见，v-html 内容没有 data-v 属性，但生成的 css 具有 svg 的 data-v 属性。

我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在这个问题中提到了后代选择器。但正如你所看到的，我在我的 css 中使用它并且它不起作用。

如何设置 v-html 内容的样式？

我有一个 Vue.js 项目，它直到几分钟前才正常工作。npm run build停止工作时，我正在尝试添加一个新的小功能，Syntax Error您会在下面看到。我花了一些时间阅读它，但在我看来，Unexpected token除了它在 App.vue 中之外，没有任何关于它实际在哪里的线索。

我怀疑我可能最终可以通过取出代码来让它工作，直到我弄清楚它正在窒息，但是处理这些错误消息的首选方法是什么？它们似乎没有帮助，每次我得到 a 时都提取代码Syntax Error比立即知道错误在哪里要慢得多。

这是 App.vue：

更新：我通过删除代码直到npm run build再次工作才发现错误。问题是我创建了一个名称中带有破折号的条件类，但没有用单引号将类名括起来。所以不是:class="{ 'modals-active': modalActive }"我有:class="{ modals-active: modalActive }".

但是，我问这个问题并不是为了解决这个特定问题，而是想知道是否有任何方法可以使用这些错误消息来更快地解决问题。实际问题出在.vue模板文件的第 29 行，但错误消息似乎表明错误在第 72 行。

我正在尝试在带有默认早午餐资产管理器的 Phoenix Framework 应用程序中使用 vue.js 和 vue-loader。当然 - 我可以切换到 webpack，但我想在早午餐下解决这个问题。

我有以下 app.js

应用程序.vue

和早午餐-config.js

和 package.json

但是在运行 phoenix server 之后，我在浏览器的控制台中看到了错误消息

出了什么问题以及如何解决这个问题？当然 - 我的浏览器中没有任何应用:(

我已经在现有项目上设置了 vue + vue-loader + HMR。

它工作得很好，vue 组件被正确加载和渲染。

热模块重载部分配置和加载。

但是，当更改只是组件的文本节点时，它似乎不会应用更新。

例如，如果我有这样的组件：

我把它改成这样：

然后我可以在浏览器控制台中看到 HMR 更新。

但是组件没有更新，它仍然说“我是组件”。

但是，如果我像这样稍微改变组件的 html 结构：

然后控制台显示 HMR 日志，但这次是组件更新。

行为始终相同，文本更改 = 无更新。

加载程序在其配置中没有任何特别之处。

开发服务器通过 gulp 启动，执行以下任务：

不知道在哪里可以解决这个问题。如前所述，它有点工作，只是不适用于文本节点更新。

我查看了vue-cli webpack-simple示例生成的模板，代码有点相似（除了开发服务器是从节点命令行启动而不是手动构建它），他们的更新文本节点，我的没有:(

有什么线索吗？

更新：相关依赖的版本

更新 2：<script>对组件的部分应用任何修改都会导致文本节点刷新。

更新 3：

PUBLIC_DEV_SERVER被设定为"http://localhost:4000/"

ENTRY被设定为"./src/js/frontend.js"

I'm trying to import some variables into a .vue component but it won't work, and I suspect a bad configuration of webpack...

.vue

config.js

I see many other have this kind of need, wonder if you ever find a solution. It is nice to have sass into templates, but without variables is pretty useless... (sure, I can just put the absolute path, it works but that's a bad practice thought...)

铬开发工具

在 .vue 文件的源映射路径中丢失

如何在 sourcemap 中添加文件路径？

在 Sublime Text 中，我习惯于通过@符号列表访问函数名。但是，当使用从vue-templates建立的项目时，文件中的所有函数名称和数据属性.vue都不会出现在此列表中。

这使得浏览.vue文件变得乏味。我已经安装了所有与 vue 相关的 Sublime 包，但似乎没有一个可以解决这个问题。

如何让符号索引与 Vue 文件一起正常工作？ 或者，您是否有其他可以正确执行此操作的文本编辑器的经验？

我有一个基于https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js的 webpack 配置 它使用 vue-loader 和 babel-loader。问题是我无法让它生成 ES5 代码，以便它可以在最广泛的客户端中工作。

如果我使用 ES2015 预设，则webpack.optimize.UglifyJsPlugin无法缩小输出，因为 Uglify 只能处理 ES5（不包括和声分支）。错误类似于：Unexpected token: punc (()并且发生在多个文件中。

我可以通过使用 which 来解决这个问题，babili-webpack-plugin这将缩小 ES6 代码，但速度很慢。但是，当我部署此代码时，我看到报告的错误说Block-scoped declarations (let, const, function, class) not yet supported outside strict mode，所以我知道他们是老客户在 ES6 代码上窒息。

如何从babel-loader获得正确的 ES5 代码输出？我尝试了多个预设，无论有没有transform-runtime插件。配置如下：

我对 Rails + Vue 很陌生。我用 Vue 创建了一个新的 rails 项目，并作为我正在使用 PUG 的模板的渲染器。在 VUE 文件中，我有：

我需要页面上的资产。对于 PUG，我添加了一个装载机

我的 cars.pug.erb 看起来像

但它给了我

看起来它呈现 .erb 和 .pug 但由于某种原因它停止了（顺便说一句，我尝试编写加载器：['html-loager', 'pug-html-loader'] 并且它开始忽略 .erb）

有人可以告诉我如何解决这个烦人的问题吗？

PS Rails - 5.1.3 和带有最新库的全新项目 PPS 我在这里提出了一个问题https://github.com/rails/webpacker/issues/620

2017 年 8 月 10 日更新：

事情是关于 .vue

此代码工作正常

但是当它在一个单独的文件中时

这没用。我认为“vue-loader”已经是个问题了