标签: vue-loader

我有一个由vue-cli创建的25个条目的小型VUE项目。

在开发过程中，打开HMR时，现在的重建时间约为10s。

我--profile --progress用来启动webpack-dev-server，输出如下：

webpack: Compiling...
308ms building modules
50ms sealing
0ms optimizing
0ms basic module optimization
6ms module optimization
3ms advanced module optimization
53ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
0ms module and chunk tree optimization
0ms chunk modules optimization
1ms advanced chunk modules optimization
13ms module reviving
0ms module order optimization
5ms module id optimization
6ms chunk reviving
3ms chunk order optimization
10ms chunk id optimization
44ms hashing
5ms module assets processing …

所以我试图将laravel项目中的vue-loader更新到15.2.1版.在更新依赖项并运行npm run watch之后,我得到一个错误,我应该使用VueLoaderPlugin.我像官方文档建议的那样添加了它.
尝试再次运行构建命令后,我的每个单个文件组件都会收到此错误:

    ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
      Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
      in C:\MAMP\htdocs\lightCRM\resources\assets\js\components\users\User.vue (line 1, column 1)
 @ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
 @ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
 @ ./resources/assets/js/components/users/User.vue
 @ ./resources/assets/js/routes/routes.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js

如果我将此规则添加到我的laravel-mix配置中

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]

然后编译成功运行,但在控制台中我得到:

[vue warn]: failed to mount component: template or render function not defined.  

我使用合适的装载机在我的vue组件中使用sass和pug.添加更多规则laravel-mix配置似乎没有任何区别.所有依赖项都是最新的,并且可以很好地使用vue-loader v.14.2.2.Node.js版本是10.1.0和npm是6.1.0.
这是我的package.json:

    {
    "private": …

我使用Webpack创建了我的项目并在开发中使用了Vue.js,但我无法注入<style>Vue模板.

它让我

Module parse failed: Unexpected token (18:5)
You may need an appropriate loader to handle this file type.
| 
| 
> body {
|   background-color: red;
| }

这是我的 webpack.config.js

  ...
  module: {
    rules: [{
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env"]
        }
      },
    ]
  },

还有我的 App.vue

<template>
  <div id="app">
    <counter></counter>
  </div>
</template>

<script>
import Counter from "./app/Counter.vue";
export default {
  name: "app",
  components: {
    counter: Counter …

您能否帮助从另一个TypeScript2 Vuejs2组件导入TypeScript2 Vuejs2组件？

目标模块（MyTable.vue）

<script lang="ts">
export default {}
</script>

源模块（App.vue）

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
     <div class="container">
      <my-vuetable></my-vuetable>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import MyVuetable from './MyTable.vue'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  propMessage: string

  // inital data
  msg: number = 123

  // use prop values for initial data
  helloMsg: string = 'Hello, …

我正在使用 es6 模块。在其中一些我使用 lodash。我的问题是 - 是否可以将 lodash 作为全局变量加载，还是应该单独导入所有文件？我在我的初始化程序中试过这个：

import lodash from 'lodash';
window._ = lodash;

也是这样：

window._ = require('lodash');

但它不起作用。在我的模块中，我在使用时遇到错误，例如 _.truncate：

类型错误：无法读取未定义的属性“截断”

来自Vue.js的新手.在Mac OS上使用版本:

$ npm --version
4.6.1
$ vue --version
2.8.1

我正在使用webpack-simpleinit和vue-cli for vue 2.0.我在我的Django项目文件夹中创建了一个文件夹,用于调用vue frontend.目录结构:

$ tree 
??? README.md
??? asnew
?   ??? __init__.py
?   ??? migrations
?   ??? models.py
?   ??? settings.py
?   ??? templates
?       ??? index.html
?   ??? urls.py
?   ??? views.py
?   ??? wsgi.py
??? frontend
?   ??? node_modules
?   ??? package.json
?   ??? src
?       ??? App.vue
?       ??? assets
?       ??? components
?       ?   ??? SearchPageResult.vue
?       ??? main.js
?       ??? …

我在现有项目上设置了vue + vue-loader + HMR.

它工作得很好,vue组件被加载并正确呈现.

热模块重装部分已配置并加载.

但是,当更改仅是组件的文本节点时,它似乎不应用更新.

例如,如果我有这样的组件:

<template lang="html">
  <div>
    <h1>I'm a Component</h1>
  </div>
</template>

<script>
export default {
}
</script>

我把它改成了这个:

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
  </div>
</template>

<script>
export default {
}
</script>

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

但该组件没有更新,它仍然说"我是一个组件".

但是,如果我稍微改变组件的html结构,如下所示:

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
    <p>do it</p>
  </div>
</template>

<script>
export default {
}
</script>

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

行为始终相同,文本更改=无更新.

加载器在其配置中没有任何特殊内容.

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
    loaders: {
    }

}

使用此任务通过gulp启动开发服务器:

// Start a webpack-dev-server
const hot_webpack_config …

我有一个新的laravel安装,一切编译得很好,但当我通过npm安装vuex或vue路由器,编译不再工作,我得到这个错误:

错误:[vue-loader] vue-template-compiler必须作为对等依赖项安装,或者必须通过选项传递兼容的编译器实现.

我有一个使用 webpack（版本 3.6.0）和 vue-loader（版本 13.0.5）构建的 vue.js（版本 2.4.4）应用程序。

在 .vue 文件中，我需要<img>根据我的应用程序的环境修改标签的 src 属性中包含的 url 。

• 在开发环境中，图片必须来自应用程序文件夹，有一个相对路径：“/src/images/exemple.png”
• 生产环境下，图片必须来自cdn，绝对路径：“ https://my-cdn.net/images/exemple.png ”

在“webpack.config.js”文件中，我已经使用“process.env.NODE_ENV”区分了不同的环境，如下所示：

const isDev = process.env.NODE_ENV === 'dev';

但我不知道如何使用 vue-loader（或其他东西）修改 .vue 文件中 img 标签的 src 属性。

有关信息，这里是“webpack.config.js”文件中 vue-loader 的定义：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  }
}

有没有一种简单的方法可以做到这一点？

Vue 3 不推荐使用v-deep组合器：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

我们有使用 SCSS 的现有代码，v-deep如下所示：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

编译成这样的东西：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

在 Vue 3 中，这种语法已被弃用，我们需要这样做：

.class {
  ::v-deep(.child-class1) {...}
  ::v-deep(.child-class2) {...}
}

我们必须v-deep对每个嵌套规则重复。事实上，还有更多且复杂的规则。

在 SCSS 中是否有任何方法可以构造一个嵌套块，其中所有内部规则都包装到此::v-deep(...)语法中？

我正在寻找类似的东西（不是实际的语法）：

::v-deep(&) {
  .child-class1 {...}
  .child-class2 {...}
}

除了自选择器 ( &) 具有相反的含义之外，它引用子选择器而不是父选择器。