问题标签 [vue-loader]

我正在尝试将我开始使用bourgeon 模板的项目迁移到Quasar framework。

在此过程中，我必须从 Webpack 1 更新到 2。除以下内容外一切正常：

我正在使用带有一些库（Rupture 和 Jeet）的手写笔和一个样式表，我在其中存储了一些应该在全局范围内和任何 vue 文件中可用的变量。我看到另一个主题是在所有需要它的vue文件中手动导入手写笔表。但为此，我更愿意根据 bourgeon 模板在全球范围内自动使用。

注意 在下面的代码中，我删除了non-necessary codeby...

在 webpack 2 for Quasar 中，文件如下。

css-utils.js

关联

基本上，它以以下形式输出 vue-loader 或常规样式加载器的加载器配置（请注意，我删除了对 SASS 的引用，因为它与此处无关）：

webpack.base.conf.js

关联

感兴趣的代码部分是：

Webpack v1 配置我希望移植到 v2

我对 Webpack v2 的问题

我无法找到将一段代码（来自 webpack 1 语法）添加到 css-utils.js 或 webpack.config.base.js 以使Jeet可用于vue文件和styl/stylus文件的方法和破裂库和index.styl 表。

我浏览了vue-loader和stylus-loader的文档，但我无法让它工作。

在 webpack.config.base.js 中添加以下代码不起作用，我不知道该怎么做。Node 向我输出一条消息错误，清楚地表明既没有Jeet/Rupture被导入，也index.styl没有重新调整我在 index.styl 中定义的一些变量或+above('tablet')来自 Rupture 的语法。

任何帮助将不胜感激，谢谢:)

我想用 vue-loader 组件中定义的 css 覆盖全局 css。

目前我在 index.html 中有这个：

在我的 vue 组件中，我有一个作用域样式：

我想要的是，当这个组件被加载时，它应该完全覆盖 index.html 中的全局 css。也就是说，它应该以这样一种方式运行，即只有作用域的 css 应该是应该应用于整个主体的 css（根本不应该使用在 index.html 中导入的 css）。

那可能吗？

在我的应用程序中，我有一个用于发票、电子邮件等内容的模板。我希望用户能够通过拖放元素来编辑这些模板。我目前正在使用vue-loaderwithwebpack将我的 vue 文件预编译成纯 JS。

是否可以即时从数据库中加载 vue 模板？我看过这篇文章，但这没有使用vue-loader，所以我不确定如何通过代码覆盖我的组件上的模板。就像是：

会有用的。这可能吗？

编辑：我尝试了以下方法，但出现错误Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.：

我正在将道具传递给组件：

在上面的代码中，我已经注释了给出错误的行。如果我删除该行，它会正常工作并且模板会正确呈现（我也可以看到 {{messageId}} 的预期值）。因此，传递数据的逻辑是正确的。

似乎访问messageIdin data() 的方式是错误的。那么如何访问messageId数据中的道具呢？

目前我必须看一些属性。如果它们每个都发生变化，我必须调用相同的函数：

所以我不得不在上面多次编写相同的代码。是否可以简单地监视所有属性并调用它们的更改处理程序，而不必多次编写相同的代码？

PS：我使用的是 vue 1.x

输出

根据

构建后，索引页面正常工作，css背景图像路径是这样的

但是组件css背景图片路径错误，像这样

看起来路径丢失了“./”，

Considering that there is single file component (as shown in the guide),

How can the same thing be done without Vue loader in non-modular ES5/ES6 environment?

Considering that the style is scoped,

Is there a way to implement scoped CSS in non-modular environment, too? If there's none, is there a way to implement it in modular environment (Webpack), but without Vue loader and custom .vue format?

我使用 webpack2 和 vue-loader 来捆绑我的 web 应用程序，我想在我的.vue文件中添加一些服务器端脚本。

我希望将此服务器端脚本捆绑到一个单独的文件中，该文件保留在服务器上，并且可以require()由 nodejs 执行。此服务器端脚本可能包含组件的服务器端 API。

我看到我可以在文件中创建自定义块.vue（例如<server-script></server-script>），但我无法设置它。

例如，我有一个weather.vue组件已经包含显示当天天气的所有内容，我想在此文件中添加一个自定义块，该块将包含该组件的服务器 API。

我尝试使用extract-text-webpack-pluginas vue-loaderoptions.loaders但它最终得到一个不包含预期数据的文件。

我对 webpack 很陌生，我不知道如何继续。

在 Vue 模板示例中，一个常见的约定是将一个main.js文件作为 Vue 实例，然后渲染一个导入的App.vue组件。为什么要这样做？我可以想到两个原因，但我想知道是否有“官方”原因。

1. Vue 实例和 Vue 组件 API 略有不同（例如data格式）。这种方法将最小化在 Vue 实例中编写的代码。

2. 如果使用vue-loader，您可以将<template />、<script />和<style />标签组合到App.vue组件中（本来应该是main.js）。

还有更多的原因吗？

参考：

vuejs-模板/webpack-simple

我想从命令行传递自定义参数。像这样的东西：

我想要实现的正是我正在开发一个 vue-loader 应用程序。该应用程序具有某些获取数据的服务。

我有另一个充当 api 服务器的应用程序。我们需要应用程序以两种方式运行（因为我们团队的所有成员都无法访问 api 服务器）

因此该服务有两种获取数据的方法：

1）如果 api 服务器正在运行（对于开发团队），使用 http 调用从 localhost 获取数据

2）如果 api 服务器没有运行（对于设计团队），只需使用服务中已经存在的静态数据：

所以这个 customparam1 应该从 webpack-dev-server 命令行传递，根据这个文档，我找不到这样的方法（我错过了什么吗？）

我该怎么做？

PS：我在 webpack 1.12.1