Question

如何使用vue-loader为单文件组件和.pug模板本地化组件？

查找

<template lang="pug">

div.container {{ test }}
    div.content
        h1 Proof of concept app
        b Vue.js + TypeScript + Webpack

        div.logos
            img(src="assets/logo-vue.png")
            img(src="assets/logo-ts.png")
            img(src="assets/logo-webpack.png")

        div.description Application is loading, please wait
        div.progress {{ percent }}%


</template>

如何用本地化替换字符串，或者传递变量“test”？

我在互联网和这些加载器的文档中找不到任何东西（pug-loader，pug-html-loader，vue-loader等），除了“它必须工作，但它没有。”

我知道模板与Vue实例的连接，但它不是解决方案，对吧？一个实例不应该知道本地化，不是吗？

我正在使用webpack 3.8.1，vue-loader和.vue文件

Answer 1

我为此苦苦挣扎了很长时间，发现解决方案就像在webpack配置中添加它一样简单。如果您使用的是vue-cli，请将其放入您的vue.config.js：

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('pug')
      .use('pug-plain-loader')
      .loader('pug-plain-loader')
      .options({ data: { require } }); // pass require as a local variable!
  },
  // ...
}

现在您可以这样做：

- const _ = require('lodash')
div
  p=_.whatever('whatever')

Vue + Pug：如何插入当地人？

1 个答案: