标签: vue-loader

我正在尝试使用响应式图像的srcset和sizesHTML 属性将特定图像提供给特定屏幕尺寸以进行性能优化和响应式设计。但是 Vue-loader 似乎不支持它们，有人遇到过类似的问题吗？如果不是，有什么可能的解决方案可以最好地优化主要受高清图像影响的应用程序性能。下面是我试图在 .vue 模板中实现的示例

<img srcset="../assets/img-1.jpg 300w,  ../assets/img-1-large.jpg 100vw" 
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">

提前致谢。

问题：卸载组件时保留组件样式。

在这个例子中，我卸载（并销毁）Unused组件，但是来自这个组件的样式仍然影响页面。

背景：我正在尝试为 SPA（使用 vue-router）调整现有的 vue 代码库。当组件 for 更改时会发生此问题，但先前组件的样式会影响新组件。我想在不改变样式的情况下解决它（例如创建包装器）。

目前我只看到一种可能的方式：改变风格。但我想有一些像这样（我没有测试它尚未）。组件挂载时添加样式，卸载时删除样式。

我已经使用vue-loader创建了Vuejs应用程序，现在我需要使用已安装的npm软件包，如下所示：

   var x = require('package-name')
   Vue.use(x)

但我有这个错误：

Uncaught TypeError: plugin.apply is not a function

Vuejs需要特殊类型的软件包，或者可以与任何JavaScript软件包一起使用，并且可以解决此错误

如何使用vue-loader使用范围限定的CSS为v-html内容设置样式？

简单示例：component.vue

<template>
  <div class="icon" v-html="icon"></icon>
</template>
<script>
  export default {
    data () {
      return {icon: '<svg>...</svg>'}
    }
  }
</script>
<style scoped>
  .icon svg {
    fill: red;
  }
</style>

产生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内容设置样式？

一旦我升级到Webpack并将相关的依赖项升级到v4,我就开始收到此错误: [Vue warn]: Failed to mount component: template or render function not defined.

这是我package.json和webpack.config.js之前和之后的相关片段:

升级前:

package.json

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-template-compiler": "^2.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-without-strict": "^0.0.4",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.26.0",
    "eslint": "^4.3.0",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.1",
    "stats-webpack-plugin": "^0.2.1",
    "style-loader": "^0.13.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "vue-loader": "^12.1.0",
    "webpack": "3.10.0",
    "webpack-dev-server": "^2.3.0",
    "webpack-monitor": "^1.0.13"
  }
} …

从一个干净的 vue 项目开始，我在从 PrimeVue 构建 .vue 组件时遇到了问题。这些都是现成的组件，实际上应该不会构建失败。

每次我尝试构建时，它都会失败，并且似乎在 CSS 样式开头处出现行指针失败。

ERROR in ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css&) 340:0
Module parse failed: Unexpected token (340:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .p-slider {
|   position: relative;
| }
 @ ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./node_modules/primevue/components/slider/Slider.vue
 @ ./node_modules/primevue/slider.js
 @ ./myproject/components/Test.js
 @ ./myproject/components/App.js
 @ ./myproject/main.js

这是我的 webpack 配置文件：

const path = require('path');
const { VueLoaderPlugin } = …

我目前正在使用 Laravel 和 Vue 构建一个 Web 应用程序。我得到的错误是针对我拥有的所有组件。

ERROR in ./resources/assets/js/components/App 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div id="layout-wrapper">
|         <app-topbar></app-topbar>
 @ ./resources/assets/js/app.js 6:0-35 41:11-14
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/style.scss

App.vue 文件如下所示：

<template>
    <div id="layout-wrapper">
        <app-topbar></app-topbar>
        <app-menu></app-menu>

        <div class="main-content">
            <div class="page-content">
                <router-view></router-view>
                <app-footer></app-footer>
            </div>
        </div>
    </div>
</template>

<script>
    import AppTopbar from './_partials/AppTopbar'
    import AppMenu from './_partials/AppMenu' …

嗨我在chrome控制台中遇到以下错误:

Uncaught TypeError: _firebase2.default is not a constructor

当我在Fire.vue(webpack vue-loader)组件中使用以下代码时:

var db = new Firebase(this.rootUrl)

这是我的Fire.vue的完整代码:

<template lang="jade">
  h2 Hello from: {{ component_name }}
</template>

<script>
import Vue from 'vue'
import Firebase from 'firebase'
Vue.prototype.$consoleLog = function (args) { console.log(args) }

export default {
  props: {
    rootUrl: {
      default: 'https://boiling-heat...', // here will be url of database
      type: String
    }
  },
  data () {
    return {
      component_name: 'Firebase component!'
    }
  },
  ready () {
    var db …

我最近将 sass-loader 从8.0升级到9.0，当我运行npm run build( vue-cli-service build) 时，出现此错误

ValidationError: Invalid options object. Sass Loader has been initialized using an options 
object that does not match the API schema.- options has an unknown property 'prependData'

这个词唯一出现prependData在 my 中vue.config.js：

ValidationError: Invalid options object. Sass Loader has been initialized using an options 
object that does not match the API schema.- options has an unknown property 'prependData'

尝试从 GitHub 克隆我的项目后（必须在本地删除我）。我开始收到以下错误。

error  in ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { resolveComponent as _resolveComponent, createVNode as _createVNode, 
withCtx as _withCtx, openBlock as _openBlock, createElementBlock as 
_createElementBlock } from "vue"
| 
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: 
any,$options: any) {
|   const _component_router_view = _resolveComponent("router-view")!
|   const _component_AppLayout = _resolveComponent("AppLayout")! …