laravel-5.5 - laravel 项目中的 vue-i18n 单文件组件

Question

给定一个 Laravel 5.5 项目，我想使用 vue-i18n 插件的“单文件组件”。文档。这看起来很简单，但我无法让它工作。

应用程序.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'en',
    messages:     {
        "en": {
            "word1": "hello world!"
        }
    }
})
Vue.component('test', require('./components/test.vue'));
const app = new Vue({ i18n, el: '#apps'});

组件/test.vue

<template>
    {{ $t('word1') }}
    {{ $t('word2') }}
</template>

<i18n>
    {
    "en": {
    "word2": "does this work?"
    }
    }
</i18n>

<script>
    export default {
        name: "test"

        data() {
            return {
                locale: 'en'
            }
        },

        mounted() {},

        watch: {
            locale (val) {
                this.$i18n.locale = val
            }
        }
    }
</script>

word1 正在被替换，但 word2 没有。在 vue 文件中的 i18n 标记之间放置错误的语法不会在编译文件时导致错误 ( npm run dev)。这是有道理的，因为我错过了：

取自文档

module.exports = {
  // ...
  module: {
    rules: [
     ...

这应该进入Webpack configuration. 但是，这个文件在 laravel 中在哪里？我能找到的只是 webpack.mix.js，但是把这段代码放在那里，并没有多大作用......而且让它mix.module.exports没有起到任何作用。搜索使我想到了这个话题，但我不确定他是否和我问的一样。

问题：未加载 i18n-tags。解决方案是添加文档中的代码。

我的问题：我在哪里添加此代码？

Answer 1

对于遇到同样问题的任何人，我建议对文档进行更改： https ://github.com/kazupon/vue-i18n/pull/237

Laravel mix 对 .vue 文件有自己的规则。要添加vue-i18n-loader，请将以下内容添加到webpack.mix.js

mix.webpackConfig({
// ...
module: {
    rules: [
        {
            // Rules are copied from laravel-mix@1.5.1 /src/builder/webpack-rules.js and manually merged with the ia8n-loader. Make sure to update the rules to the latest found in webpack-rules.js
            test: /\.vue$/,
            loader: 'vue-loader',
            exclude: /bower_components/,
            options: {
                // extractCSS: Config.extractVueStyles,
                loaders: Config.extractVueStyles ? {
                    js: {
                        loader: 'babel-loader',
                        options: Config.babel()
                    },

                    scss: vueExtractPlugin.extract({
                        use: 'css-loader!sass-loader',
                        fallback: 'vue-style-loader'
                    }),

                    sass: vueExtractPlugin.extract({
                        use: 'css-loader!sass-loader?indentedSyntax',
                        fallback: 'vue-style-loader'
                    }),

                    css: vueExtractPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                    }),

                    stylus: vueExtractPlugin.extract({
                        use: 'css-loader!stylus-loader?paths[]=node_modules',
                        fallback: 'vue-style-loader'
                    }),

                    less: vueExtractPlugin.extract({
                        use: 'css-loader!less-loader',
                        fallback: 'vue-style-loader'
                    }),

                    i18n: '@kazupon/vue-i18n-loader',
                } : {
                    js: {
                        loader: 'babel-loader',
                        options: Config.babel()
                    },

                    i18n: '@kazupon/vue-i18n-loader',
                },
                postcss: Config.postCss,
                preLoaders: Config.vue.preLoaders,
                postLoaders: Config.vue.postLoaders,
                esModule: Config.vue.esModule
            }
        },
        // ...
    ]
},
// ...
});