Vue + Pug：如何插入本地人？答案

【问题标题】：Vue + Pug: How to insert locals?Vue + Pug：如何插入本地人？
【发布时间】：2018-04-24 10:19:22
【问题描述】：

如何使用 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”？

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

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

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

【问题讨论】：

我认为解决方案是通过本地人为 .pug 模板传递 i18n，但我该怎么做呢？
也许像npmjs.com/package/vuejs-localization 这样的第三方解决方案会有所帮助？
@RomanYakimchuk 你有想过这个吗？

标签： javascript webpack vue.js pug

【解决方案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')

【讨论】：