标签: vue-loader

我是vue.js的新手.我开始迁移我的angularjs应用程序.我正在使用vue cli生成一个新的simple-webpack项目.这将创建一个新的webpack + vueLoader项目.一切顺利,但现在我有一个问题.在我的@click事件中我想要更改我的数据,但我无法访问该对象.'this'不是数据实例.

我在这里错过了什么？

<template>
    <input type="radio" name="account-type" @click="setAccountType(item.id)"/><span>{{item.name}}</span>
</template>
<script>
  export default {
     data() {
        return { accountType: null
     },
     methods: { setAccountType: (typeId) => this.accountType = typeId
  }
</script>

这不是预期的数据实例,因此不会更新.在vuejs doc中,我可以看到只是在一个方法中解决这个问题就足够了: vue js doc

任何帮助表示赞赏.

亲切的问候.

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

webpack-dev-server --inline --hot --customparam1=value

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

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

因此该服务有两种获取数据的方式:

1)如果api服务器正在运行(对于开发团队),请使用http调用从localhost获取数据

2)如果api服务器没有运行(对于设计团队),只需使用服务中已存在的静态数据:

var someData;
if (customparam1 === "withApi"){
   someData=getData("http://localhost:8081/apiendpoint");
} else {
   someData=[
       {a:b},
       {c:d},
       // more custom array of static data
       .....
   ]
}

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

我该怎么做？

PS:我在webpack 1.12.1上

我正在尝试将 vue-loader 与我的 SPA VUE 应用程序一起使用，但出现以下错误。

ERROR in ./app2.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (/Users/daniel.bachnov/docker/qhs3-admin/frontend/node_modules/vue-loader/dist/index.js:70:34)
 @ ./main.js 1:0-29 14:8-11

webpack 5.74.0 compiled with 1 error and 3 warnings in 3312 ms

为了消除应用程序代码噪音，我创建了非常简单的组件app2.vue：并尝试将其连接到我的main.js入口点文件。

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

main.js

import App from './app2.vue';
import Router from './router/router.js';
import …

所以，这是我的 Api 服务组件，我使用的是 Axios：

import api from './Api.vue';

export default {
    name: 'app-feed-service',
    methods: {
        getPosts() {
            return api.get('posts/');
        }
    }
}

和一些饲料成分

import AppSinglePost from './../Feed/Post.vue';
import AppFeedService from './../../api/Feed.vue';

export default {
    name: 'app-posts',
    components: {
        AppSinglePost
    },
    data() {
        return {
            posts: []
        }
    },
    created() {
        AppFeedService.getPosts().then((res) => {
            console.log(res);
        });
    }
}

现在的错误：

TypeError: __WEBPACK_IMPORTED_MODULE_1__api_Feed_vue___default.a.getPosts is not a function

有人可以帮忙吗？

我正在尝试在Vue组件中使用Bootstrap,我希望所有CSS都是作用域的.我试过这样的事情:

<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>

但它看起来似乎不是css的范围.有没有办法做到这一点？

<style module>和<style scoped>Vue有什么区别？

官方文档(link1,link2)仅声明scoped使用PostCSS转换并module使用CSS模块.但两者之间真正的功能区别是什么？

(注意:如果他们使用的PostCSS转换是该插件,它实际上使用CSS模块......)

背景

从一个新的vue.js(2.0)项目开始.我曾vue-cli在其他项目(vuejs-templates/webpack)中工作,并发现在进行任何类型的更改时很难掌握构建过程.最重要的是,webpack因其缺乏文档而臭名昭着,因此即使对构建过程进行微小调整也证明了很多工作.总的来说,我相信我理解webpack和vue-loader.尽管如此,我仍然很难全面了解情况vuejs-templates/webpack.

题

我正在考虑为这个应用程序滚动我自己的webpack配置,但我担心我最终会得到一个与当前一样大的构建过程vuejs-templates/webpack.我的计划是从vuejs-templates/webpack-simple工作,而不是过于复杂化.我想到的是位于其间vuejs-templates/webpack-simple和之间的配置/构建过程vuejs-templates/webpack.

我很想知道其他人(或许我有更多经验)的感受vuejs-templates/webpack.不知道随着项目的发展或者最终是否有意义,它会变得更难使用.

滚动我自己的webpack配置/构建过程是否有意义,或者我应该简单地使用它vuejs-templates/webpack？

每当我想要构建文件时,我都会收到错误.这是什么原因？似乎.vue文件无法通过webpack识别,但webpack配置文件看起来正常.webpack错误

bundle-app.js   189 kB       1  [emitted]  app
    + 12 hidden modules

ERROR in Unexpected token >
 @ ./app/application.js 7:11-31

webpack.config.js

var path = require("path");

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    app: './app/application.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle-[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: /src/,
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue',
      },
    ]
  },
  vue: {
    loaders: {
      js: 'babel'
    }
  }
}

的package.json

"devDependencies": { …

我在 TS 中使用 Vue3（最后一个 vue-cli）。

我想在 vue-loader 编译 .vue 文件时获取所有节点（vnodes）元素。我需要读取节点属性并删除所有“数据测试”。

我尝试在 vue.config.js 中使用：

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      // .loader('vue-loader')                       // same with
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
modules: [                                           // never enter here
            {
              preTransformNode(node) {
                // if (process.env.NODE_ENV === 'production') {
                const { attrsMap, attrsList } = node
                console.log(node)
                if (attrsMap['qa-id']) {
                  delete attrsMap['qa-id']
                  const index = attrsList.findIndex(
                    (x) => x.name === 'data-test'
                  )

                  attrsList.splice(index, 1)
                }
                // } …

我使用vue-loader使用webpack构建我的Vue应用程序.我的应用程序由Firebase提供.

出于搜索引擎优化的目的,我需要在我的应用程序(GET /robots.txt)的根目录下提供robots.txt文件.

如何配置webpack/vue-loader来提供此文件？

这是我目前的webpack基础配置 ./config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // …