标签: vue-loader

考虑到有单个文件组件(如指南中所示),

<style>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

在非模块化ES5/ES6环境中如何在没有Vue加载器的情况下完成同样的事情？

考虑到风格是范围的,

<style scoped>
.example {
  color: red;
}
</style>

有没有办法在非模块化环境中实现作用域CSS？如果没有,有没有办法在模块化环境(Webpack)中实现它,但没有Vue加载器和自定义.vue格式？

我正在使用webpack + vue-loader来创建vuejs应用程序.我有多个.vue组件文件.当我写这样的东西时:

import _ from 'lodash'

在script部分内部,ComponentA.vue并且ComponentB.vue,这会创建两个单独的lodash副本还是只是导入一个引用？

在ionicons使用npm 安装v3.0.0 之后，将字体导入到我的应用程序时遇到很多麻烦：

// /src/App.vue
@import '../node_modules/ionicons/dist/scss/ionicons.scss';

似乎指向正确的路径，但是，我遇到了很多错误，例如

Cannot find module "../fonts/ionicons.eot?v=3.0.0-alpha.3

显然，此问题源于字体文件，因为例如，上面的文件实际上是ionicons.eot，而不是ionicons.eot?v=3.0.0-alpha.3。

我还在Github上进行了3年的讨论，并尝试了评论中建议的每个装载程序，但没有一个起作用。我是Vue和Webpack的新手，所以我不确定自己做错了什么。

问题：为了能够在vue-loader的应用程序中使用Ionicons（或Font Awesome或其他字体库），我需要做什么？

我有一个 Vue.js 项目，直到几分钟前才正常运行。npm run build当我停止工作时，我正在尝试添加一个新的小功能，Syntax Error如下所示。我花了一些时间仔细阅读它，但在我看来，Unexpected token除了在 App.vue 中之外，没有给出任何关于其实际位置的线索。

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

| building for production...
Starting to optimize CSS...
Processing css/app.b78de1b1e52d045850f3f8ef25eab789.css...
Processed css/app.b78de1b1e52d045850f3f8ef25eab789.css, before: 2077, after: 2009, ratio: 96.73%
Hash: 463db738399a4df0bc89
Version: webpack 2.6.1
Time: 7211ms
                                           Asset       Size  Chunks             Chunk Names
                  js/app.46d986e313fa2c015cd0.js    5.62 kB       0  [emitted]  app
               js/vendor.bf7e840e23d2fcdbebe0.js     141 kB       1  [emitted]  vendor
             js/manifest.c323c0be7462a1c8da87.js    1.51 kB       2  [emitted]  manifest
    css/app.b78de1b1e52d045850f3f8ef25eab789.css    2.01 kB       0  [emitted]  app
              js/app.46d986e313fa2c015cd0.js.map      26 kB       0  [emitted] …

我正在尝试使用 webpack 和 Vue.js 运行 plotly.js

对于像 scatter 这样的简单图，它可以通过以下配置正常工作：

在 webpack.config.js 上

loaders: [
        {
            test: /node_modules/,
            loader: 'ify-loader'
        },

    ],

在 vue 文件中，我使用以下代码导入：

var Plotly = require('plotly.js/lib/core');
Plotly.register([
    require('plotly.js/lib/scatter'),
    require('plotly.js/lib/scatter3d'),
]);

使用 scatter 一切正常，但是当我尝试使用时：

type: 'scatter3d',

我收到以下错误：

It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform:

所以根据我的理解，除了 node_modules 之外，我还需要让 ify-loader 处理我的文件项目。

我已经尝试按照文档的 GitHub 自述链接上的建议在我的项目中插入转换，但两个测试都不起作用（使用 .js 和 .vue）：

使用 .js

    loaders: [ …

VueJS 新手，正在学习教程。这是我做的步骤

• 使用 VUE CLI 创建项目

• 尝试使用此代码创建组件。

   var data = {
      items: [{ text: 'Bananas', checked: true },
          { text: 'Apples', checked: false }
          ],
      title: 'My Shopping List',
      newItem: ''
          }; 
  
  Vue.component('items-component', {
      data: function () {
          return data;
      },
      template: `
  <div class="blog-post">
    <span>sample</span>
  </div>
  `
  });
  

  Run Code Online (Sandbox Code Playgroud)

• 将此添加到 App.vue 模板部分。

    <items-component></items-component>
  

  Run Code Online (Sandbox Code Playgroud)

但是我收到这个错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use …

我使用vue-cli3 webpack4和vue-loader v15，它们都是最新的；

我想配置vue-loader，但这是一个错误； Error: [VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use. vue.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
    productionSourceMap: false,
    baseUrl: "./",
    configureWebpack: {
        module: {
            rules: [{
                test: /\.vue$/,
                loader: "vue-loader"
            }]
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    }
}

package.js```

 "dependencies": {
    "awe-dnd": "^0.3.1",
    "axios": "^0.18.0",
    "iview": "^3.1.5",
    "lodash": "^4.17.11",
    "vue": "^2.5.17",
    "vue-router": "^3.0.2" …

尝试使用单个文件组件在vue项目中设置scss时遇到错误。当我尝试使用<style lang="scss">块时，我当前遇到此错误，但是否则我的项目将按预期工作。

ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

<template>
^
      Invalid operator in attribute selector for object
      in C:\Users\yanch\OneDrive\Desktop\virtualenvs\agg_site\client\src\App.vue (line 1, column 2)
 @ ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&) 4:14-279
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js

我不是专家，但是此错误使我认为vue-loader规则存在问题。似乎它正在尝试将模板编译为样式块（尽管我可能错了）。这是我的webpack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader'},
            { test: /\.vue$/, use: 'vue-loader'},
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, …

在我的vue-cli项目中，我有许多.vue带有标签的文件，这些标签在文本节点和结束标签之间有尾随空格。我需要尾随空格（或制表符，或换行符）。

我的模板中有什么：

<RouterLink
  :to="{name: 'vacancy', params: { id: vacancy.id }}"
  class="vacancy-name-link"
>
  {{ vacancy.title }}
</RouterLink>

我想要的是：

<a href="/vacancy/0">Vacancy title</a>

我拥有的：

<a href="/vacancy/0"> Vacancy title </a>

为什么我不能在一行中编写代码：

1. eslint vue/multiline-html-element-content-newline中有一条规则
2. 在一个项目中，我有很多文件（超过 500 个），这些文件带有许多不同的标签（例如<span>，<a>等等）。