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

【问题标题】：vue-i18n single file component in laravel projectlaravel 项目中的 vue-i18n 单文件组件
【发布时间】：2017-10-17 10:09:59
【问题描述】：

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

app.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'});

components/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)。这是有道理的，因为我错过了：

Taken from the documentation

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

这应该放在Webpack configuration 中。但是，这个文件在 laravel 中在哪里？我能找到的只有 webpack.mix.js，但是把这段代码放在那里，并没有太大的作用......而且使它 mix.module.exports 也没有成功。搜索将我带到this topic，但我不确定他是否和我问的一样。

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

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

【问题讨论】：

标签： laravel-5.5 laravel-mix vue-i18n

【解决方案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
            }
        },
        // ...
    ]
},
// ...
});

【讨论】：