标签: vue-loader

我将道具传递给组件:

<template>
   {{messageId}}
   // other html code
</template>

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            // below line gives ReferenceError messageId is not defined
            somevar: messageId,
            // other object attributes
         }
      }
   }
</script>

在上面的代码中,我已经评论了产生错误的行.如果我删除该行,它将正常工作并且模板呈现正确(我也可以看到{{messageId}}的预期值).因此传递数据的逻辑是正确的.

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

(请参阅结尾为什么这不是一个骗局我如何在另一个JavaScript文件中包含JavaScript文件？)

Javascipt + Vue + webpack + vue-loader noob ...在最简单的事情上磕磕绊绊!

我有App.vue一个模板:

<template>
 <div id="app">
     <login v-if="isTokenAvailable()"></login>
 </div>
</template>

我isTokenAvailable以正常方式为Vue 声明了该方法methods.它使用我在单独js文件中编写的函数:

<script>
import * as mylib from './mylib';

export default {
  ....
    methods:{
        isTokenAvailable: () => {
            return mylib.myfunc();
        }
    }
}
</script>

mylib 像这样开始:

import models from './model/models'
import axois from 'axios'

export default function() {
    // functions and constants
}

当我运行项目时,我收到警告:

export 'myfunc' (imported as 'mylib') was not found …

我是 vue.js 的新手，刚从 react.js 过来。我在 vue 加载器中面临的问题一开始并没有发生。但是从第二次启动服务器时应用程序崩溃。

 npm run serve

> todo@0.1.0 serve /home/riyad/Desktop/todo_wedevs/todo
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at api.chainWebpack.webpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/config/base.js:114:23)
    at webpackChainFns.forEach.fn (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status …

我有一个包含类似语句成分this.$route.fullPath,我应该怎么嘲笑的值fullPath的$route对象,如果我想测试组件？

我正在尝试将 vuejs 3 集成到使用 webpack 的现有项目中。我读过 vue-loader，所以我正在尝试使用它。

在官方文档中，我有这个：

每次发布新版本的 vue 时，都会同时发布相应版本的 vue-template-compiler。编译器的版本必须与基础 vue 包同步，以便 vue-loader 生成与运行时兼容的代码。这意味着每次升级项目中的 vue 时，都应该升级 vue-template-compiler 以匹配它。

因此，当我尝试编译时，出现此错误：

Vue packages version mismatch:

- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

但是当我尝试安装 vue-template-compiler@3.0.2 时，我收到此错误：

? npm install vue-template-compiler@3.0.2
npm ERR! code …

我发现自己在每个.vue文件中重复相同的模式,以便使用变量等:

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

或者如果它嵌套在一个文件夹中,我必须记住要小心路径:

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

有没有办法settings.scss在我创建的每个.vue文件中全局导入该文件？我查看了文档并没有看到它,但也许我错过了,或者这可能是我需要利用webpack来做的事情？

我正在使用两页的Vue路由器:

let routes = [
    {
        path: '/',
        component: require('./components/HomeView.vue')
    },
    {
        path: '/intro',
        component: require('./components/IntroView.vue')
    }
]

这很好,除了我的每个组件都有不同的主体样式:

HomeView.vue:

<template>
    <p>This is the home page!</p>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: red;
    }
</style>

IntroView.vue:

<template>
    <div>
        <h1>Introduction</h1>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: pink;
    }
</style>

我的目标是让这两个页面具有不同的背景样式(最终在它们之间进行过渡).但是当我去home路线(有red背景)的时候,然后点击intro路线,背景颜色保持不变red(我希望它改变为pink).

编辑: index.html:

  <body>
    <div id="app">
        <router-link to="/" exact>Home</router-link> …

目前我要看几个属性.如果每个都改变了,我必须调用相同的函数:

export default{
    // ...... rest of code 
    watch: {
      propa: function(after,before) {
         doSomething(after,before);
      },
      propb: function(after,before) {
         doSomething(after,before);
      }
      // ... so on
    }
}

所以我不得不多次编写相同的代码.是否可以简单地监视所有属性并调用其更改处理程序而无需多次编写相同的代码？

PS:我正在使用vue 1.x.

产量

    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? 
        config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    }

基础

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },

在构建之后,索引页面正常工作,css背景图像路径就像这样

background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;

但组件css背景图像路径错误,像这样

background: url(static/img/btn_my.b9186cc.png) no-repeat 50%;

这看起来像路径失去了"./",

我有2个Vue-Cli webpack项目(ClientApp和Lib).Lib是我的组件库(与其他项目共享)

问题

当我构建我的项目ClientApp时npm run build,我有以下错误:

ERROR in static/js/app.d08a24ce0e8d0438ce68.js from UglifyJs
Unexpected token: operator (>) [C:/.../Lib/src/tools/escape-key.js:3,0][static/js/app.d08a24ce0e8d0438ce68.js:17468,38]

问题

似乎错误来自文件中的箭头功能escape-key.js.这是ES6语法而UglifyJS无法解析此问题.在Uglify之前,Babel不应该先行吗？请注意,它适用于*.vue文件.

项目结构

ClientApp
   | - build
   | - config
   | - src
       | - App.Vue // import EscapeKey from '~lib/tools/escape-key';



Lib
  | -src
     | - tools
         | - escape-key.js

ClientApp的webpack.base.conf.js文件

注意Lib有一个别名.

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '~lib': path.join(__dirname, '../../lib/src'),
    }
  },

如有需要,请随时询问更多详情.