Question

鉴于laravel 5.5项目，我想使用＆＃34;单个文件组件＆＃34; 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'});

组件/ 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-tag之间放置错误的语法，在编译文件时不会导致错误（npm run dev）。这是有道理的，因为我错过了：

taken from documentation

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

这应该放在Webpack configration中。但是，这个文件在laravel中在哪里？我所能找到的只是webpack.mix.js，但是将这些代码放在那里，并没有做太多的事情......同时使它成为mix.module.exports也不行。搜索引导我this topic，但我不确定他是否和我一样问。

问题： 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
            }
        },
        // ...
    ]
},
// ...
});

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

1 个答案: