intlify / vue-cli-plugin-i18n Goto Github PK
View Code? Open in Web Editor NEW:globe_with_meridians: Vue CLI plugin to add vue-i18n to your Vue Project
License: MIT License
:globe_with_meridians: Vue CLI plugin to add vue-i18n to your Vue Project
License: MIT License
I've read other issues and believe this error is similar but sufficiently different from other reported cases, including this one here: #9,
Running vue add i18n
fails to complete (the generator???) on a real project that I am building. If I generate just a blank project with minimal options as the default then the plugin installs OK; however, this isn't my reality becuase I am working on a Production app. The real noteworthy differences I can discern between an empty project and mine, is that my real project has a few other components such as vuex, vuetify, and typescript and completed vue components -- that I need to localize.
Hope you can help.
package.txt
I've attached my package.json (as package.txt since package.json was blocked) in case it helps pinpoint the versions of other plugins I am using. I'd appreciate your input on what I am doing wrong or a fix.
My environment: OSX Mojave, Node 10.3.0,
Error log:
$ vue add i18n
π¦ Installing vue-cli-plugin-i18n...
+ [email protected]
added 5 packages from 3 contributors and audited 40202 packages in 15.011s
found 6 vulnerabilities (1 low, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
β Successfully installed plugin: vue-cli-plugin-i18n
? The locale of project localization. en
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? No
π Invoking generator for vue-cli-plugin-i18n...
ERROR Error: Line 16: Unexpected token let
Error: Line 16: Unexpected token let
at ErrorHandler.constructError (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5012:22)
at ErrorHandler.createError (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5028:27)
at Parser.unexpectedTokenError (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1985:39)
at Parser.throwUnexpectedToken (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1995:21)
at Parser.consumeSemicolon (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2297:23)
at Parser.parseLabelledStatement (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:4029:19)
at Parser.parseStatement (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:4122:97)
at Parser.parseStatementListItem (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:3393:31)
at Parser.parseScript (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:4723:29)
at Object.parse (/Users/calvinnguyen/.nvm/versions/node/v10.3.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:122:61)
Hi @kazupon,
First of all great plugin! Keep up good work!
Our translation team wants "one file" to translate all the documents. And making them all global is not manageable, my global translation file becomes a mess.
So I made an extension to extract all the <i18n>
tags into a file, and after bulk edit in one file, distribute them back to the .vue
files. It's named vue-i18n-service
(https://github.com/f/vue-i18n-service)
It uses Vue's template compiler to parse .vue files and extract <i18n>
tags.
cd /my/vue/project
npx vue-i18n-service export > translations.json
generates an output like:
{
"src/components/Hello.vue": {
"en": {
"hello": "Hello"
},
"tr": {
"hello": "Merhaba"
}
},
"src/views/World.vue": {
"en": {
"world": "World"
},
"tr": {
"world": "DΓΌnya"
}
}
}
And after editing this file, you can simply change all the files by running
npx vue-i18n-service import < translations.json
And TA-DA! Done. All of your files were updated :)
I'm asking if the plugin interface would support this by opening a code editor and saving it?
Maybe it's a mistake on my part but when I try to add translation strings (e.g. in en.json or de.json) and save the file I get a module not found exception. If I add a string in the vue ui however, it works. For me that's not practical however. Am I missing something? :)
The locale
, the fallbackLocale
and the localeDir
is defined in i18n.js
as well as in the pluginOptions of vue.config.js
. How come? What's the benefit?
I've now removed those properties from vue.config.js
and it still works as expected. I generated the project with SFC enabled.
This error occurs if tsconfig.json doesn't have types array. i18n plugin should check this and create array if necessary.
Hey, I found Project Localizations
on the vue ui page.
It is very convenient.
However, there are some problems.
First:
Click the "Add Path" button, I can type project.name
, but change it to project.otherName
and it will not be saved.
the second:
When I changed from path1
to path2
, the other language file did not change. I don't know if this is in line with expectations.
The third:
Editing will cause the list order to change. I think this will interfere with the experience of continuous editing.
Hello!
Thanks for awesome library. Unfortunately, I can't use it with vue-cli, because of the following error. I'm getting this when running: vue add i18n
:
ERROR Error: Line 81: Unexpected reserved word
Error: Line 81: Unexpected reserved word
at ErrorHandler.constructError (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5012:22)
at ErrorHandler.createError (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5028:27)
at Parser.unexpectedTokenError (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1985:39)
at Parser.throwUnexpectedToken (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1995:21)
at Parser.parsePrimaryExpression (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2390:38)
at Parser.inheritCoverGrammar (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2285:37)
at Parser.parseLeftHandSideExpressionAllowCall (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2899:26)
at Parser.inheritCoverGrammar (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2285:37)
at Parser.parseUpdateExpression (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:3004:26)
at Parser.parseUnaryExpression (/Users/findutnyy/.node/11.6.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:3048:26)
Vue: ^2.5.17
i18n: latest
execute "vue add i18n" on a vue project
i18n should install, fire the plugin generator and finished installation afterwards.
i18n installs fine,
launches the plugin generator which also works fine until you hit enter after selecting
an option for "Enable locale messages in Single file components". Afterwards an Error is thrown
ERROR Error: Line 17: Unexpected identifier Error: Line 17: Unexpected identifier at ErrorHandler.constructError (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima. js:5012:22) at ErrorHandler.createError (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js: 5028:27) at Parser.unexpectedTokenError (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima. js:1985:39) at Parser.throwUnexpectedToken (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima. js:1995:21) at Parser.expect (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2168:19) at Parser.parseGroupExpression (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima. js:2764:27) at Parser.inheritCoverGrammar (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.j s:2285:37) at Parser.parsePrimaryExpression (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprim a.js:2348:38) at Parser.inheritCoverGrammar (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.j s:2285:37) at Parser.parseLeftHandSideExpressionAllowCall (C:\Users\janja\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\espri ma\dist\esprima.js:2899:26)
3.2.1
Create a demo project
install i18n (https://kazupon.github.io/vue-i18n/)
go to http://localhost:8000/addon/org.kazupon.vue-i18n/
create enough messages to fill your screen height
try to scroll
The window should be scrollable
The window is not scrollable
It is fixable by adding overflow-y: scroll;
to element
<div data-v-7ba5bd90="" data-v-2a0d3bdd="" class="project-localizations router-view">
integrate eslint-plugin-vue-i18n
Hi,
I cannot install and invoke vue-cli-plugin-i18n neither with Vue-cli (3.rc3) and not with VueUI.
Tested on two computers (both: win10 home x64, node 8.10.0, npm 6.1.0, yarn 1.7.0).
Steps to reproduce
vue add i18n
What is expected?
π¦ Installing vue-cli-plugin-i18n...
yarn add v1.7.0
[1/5] Validating package.json...
[2/5] , [3/5] Fetching packages..., [4/5] ..., [5/5] Building fresh packages...
.......... truncated
info All dependencies
ββ [email protected]
ββ [email protected]
ββ [email protected]
Done in 34.04s.
β Successfully installed plugin: vue-cli-plugin-i18n
? The locale of project localization. en
? The locale of project fallback localization. en
? Enable locale messages in Single file components ? No
π Invoking generator for vue-cli-plugin-i18n...
What is actually happening?
After invoking I get error:
π Invoking generator for vue-cli-plugin-i18n...
ERROR Error: Line 31: Unexpected token ...
Error: Line 31: Unexpected token ...
at ErrorHandler.constructError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:5004:22)
at ErrorHandler.createError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:5020:27)
at JSXParser.Parser.unexpectedTokenError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:1985:39)
at JSXParser.Parser.throwUnexpectedToken (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:1995:21)
at JSXParser.Parser.parseObjectPropertyKey (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2492:33)
at JSXParser.Parser.parseObjectProperty (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2527:25)
at JSXParser.Parser.parseObjectInitializer (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2595:35)
at JSXParser.Parser.inheritCoverGrammar (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2278:37)
at JSXParser.Parser.parsePrimaryExpression (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2347:38)
at JSXParser.parsePrimaryExpression (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:466:97)
Maybe will help: same thing is happening with vue-cli-plugin-django
but vue-cli-plugin-vuex-module-generator
works fine when invoked
vue create -d -n repro
cd repro
vue add i18n
Setup with
yarn run i18n:report
Scan files and report missing / unused localization
$ vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json' 'vue)'' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 255. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
On i18n.ts
file, the locales are only parsed with the regex: /([a-z0-9]+)\./i
, but that doesn't match if we use en-GB.json
, this can be simply solved with getting -
const matched = key.match(/([a-z0-9-]+)\./i);
In my webpack, vue loader is already configured as follows:
//In webpack.base.conf.js
const vueLoaderConfig = require('./vue-loader.conf')
module.exports = {
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},}
]}
//In vue-loader.conf.js
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction,
})
}
Now the problem is: how can I change the configuration to include
i18n: '@kazupon/vue-i18n-loader' to webpack.base.conf.js without removing vueLoaderConfig?
Please can someone help? Thanks.
I'm trying to use it with nativescript and it is using different folder: app
instead of src
It would be good to be able to specify source files folder, because ui of the plugin crashes:
(node:2124) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, scandir 'C:\xxx\yyy\native-app/src/locales'
ex: 8.11.2, 0.6.0
Run vue ui
go to Localizations tab create some item until to the end of the page you can see the page doesn't scroll
For a fix, add overflow: auto
to class project-localizations router-view
Can you add enableInSFC
support inside i18n: {}
options?
I guess that this option dont recognize inside i18n options object. To solve I go back to outside, like this in my vue.config.js
:
module.exports = {
// ...
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'i18n/locales/messages',
enableInSFC: true // This Doesn't works!
},
enableInSFC: true // This Works!
}
}
vue-cli 3.0 beta 10
vue inspect:
{
context: '/home/squall/projects/mod',
mode: 'development',
devtool: 'cheap-module-eval-source-map',
node: {
setImmediate: false,
process: 'mock',
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
output: {
path: '/home/squall/projects/mod/dist',
filename: '[name].js',
publicPath: '/'
},
resolve: {
symlinks: true,
alias: {
'@': '/home/squall/projects/mod/src',
vue$: 'vue/dist/vue.runtime.esm.js'
},
extensions: [
'.js',
'.jsx',
'.vue',
'.json'
],
modules: [
'node_modules',
'/home/squall/projects/mod/node_modules',
'/home/squall/projects/mod/node_modules/@vue/cli-service/node_modules'
]
},
resolveLoader: {
modules: [
'node_modules',
'/home/squall/projects/mod/node_modules',
'/home/squall/projects/mod/node_modules/@vue/cli-service/node_modules'
],
symlinks: true
},
module: {
noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOpitons: {
preserveWhitespace: false
},
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
}
}
]
},
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.(svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.pug$/,
use: [
{
loader: 'pug-plain-loader'
}
]
},
{
test: /\.css$/,
oneOf: [
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
{
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
}
]
},
{
test: /\.scss$/,
oneOf: [
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
{
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}
]
},
{
test: /\.sass$/,
oneOf: [
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
},
{
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
}
]
},
{
test: /\.less$/,
oneOf: [
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
},
{
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
}
]
},
{
test: /\.styl(us)?$/,
oneOf: [
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
},
{
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
}
]
},
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: '/home/squall/projects/mod/node_modules/.cache/cache-loader'
}
},
{
loader: 'babel-loader'
}
]
},
{
enforce: 'pre',
test: /\.(vue|(j|t)sx?)$/,
exclude: [
/node_modules/,
'/home/squall/projects/mod/node_modules/@vue/cli-service/lib'
],
use: [
{
loader: 'eslint-loader',
options: {
extensions: [
'.js',
'.vue'
],
envs: [
'node'
],
rules: {
'no-console': 'off',
'no-debugger': 'off'
},
parserOptions: {
parser: '/home/squall/projects/mod/node_modules/babel-eslint/lib/index.js'
},
emitWarning: true,
formatter: function () { /* omitted long function */ }
}
}
]
}
]
},
plugins: [
/* VueLoaderPlugin */ {},
/* DefinePlugin */ {
definitions: {
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}
},
/* CaseSensitivePathsPlugin */ {
options: {},
pathCache: {},
fsOperations: 0,
primed: false
},
/* FriendlyErrorsWebpackPlugin */ {
compilationSuccessInfo: {},
onErrors: undefined,
shouldClearConsole: true,
formatters: [
function () { /* omitted long function */ },
function () { /* omitted long function */ },
function () { /* omitted long function */ },
function () { /* omitted long function */ }
],
transformers: [
function () { /* omitted long function */ },
function () { /* omitted long function */ },
function () { /* omitted long function */ },
function () { /* omitted long function */ }
]
},
/* HotModuleReplacementPlugin */ {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000
},
/* NamedModulesPlugin */ {
options: {}
},
/* NoEmitOnErrorsPlugin */ {},
/* ProgressPlugin */ {
profile: undefined,
handler: undefined
},
/* HtmlWebpackPlugin */ {
options: {
template: '/home/squall/projects/mod/public/index.html',
templateParameters: function () { /* omitted long function */ },
filename: 'index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false
}
},
/* PreloadPlugin */ {
options: {
rel: 'preload',
include: 'initial',
excludeHtmlNames: [],
fileBlacklist: [
/\.map$/,
/hot-update\.js$/
]
}
},
/* PreloadPlugin */ {
options: {
rel: 'prefetch',
include: 'asyncChunks',
excludeHtmlNames: [],
fileBlacklist: [
/\.map/
]
}
},
{
apply: function () { /* omitted long function */ }
}
],
entry: {
app: [
'./src/main.js'
]
}
}
Error:
error in ./src/patch/name.json?vue&type=custom&index=0&blockType=i18n
Module parse failed: Unexpected token i in JSON at position 0
Sorry, wrong plugin
When you add a new key It will add on the others locales with the same key and an empty string value, this behavior is good for development, but production you want allow to fallback to the fallbackLocale.
I think the default value should be null
,
https://github.com/kazupon/vue-cli-plugin-i18n/blob/dev/ui.js#L136
additional[path] = null // set default
or in the file i18n.ts
messages[locale] = process.env.NODE_ENV !== 'production' && locales(key) || removeEmpty(locales(key));
// ....
// simple recursive remove keys with empty value
const removeEmpty = (obj: object | any): object =>
Object.keys(obj)
.filter((k: string) => obj[k] !== null && obj[k] !== undefined && obj[k] !== '') // Remove undef. and null and empty.string.
.reduce(
(newObj, k) =>
typeof obj[k] === 'object'
? Object.assign(newObj, { [k]: removeEmpty(obj[k]) }) // Recurse.
: Object.assign(newObj, { [k]: obj[k] }), // Copy value.
{},
);
I can do a PR if agreed
I use the yml format instead of the json format in the locale file because it is very simple to write.
// i18n.js
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[a-z0-9]+\.yml$/i)
// ...
}
But I got these warnings when I load yml format file
Can you give me some advice? Thanks :)
https://kazupon.github.io/vue-i18n/guide/sfc.html#yaml-loading describes how to use YAML files with vue-cli, but I don't really understand where to write that vue-cli specific config when using vue-cli-plugin-i18n.
Had it in vue.config.js
and also adapted loadLocaleMessages
to load YAML instead of JSON files, added yaml-loader, but I wasn't able to see any localized strings. :(
Would be nice if vue-cli-service i18n:report
command would have non-zero exit code if there are missing or unused keys. And also option to check only fallback locale (or specific locale) so that it would be possible to reuse this command in CI
When I modified the project entry in vue.config.js with Vue-cli 3.0 like:
configureWebpack: {
resolve: {
alias:{'@' : resolve('examples')},
}
},
chainWebpack: config => {
const appsetting = config.entry('app');
appsetting.clear();
appsetting.add('./examples/main.ts');
},
project tree like:
+Root
+ examples
+assets
+components
+locales
+views
App.vue
i18n.ts
main.ts
......
+node_modules
+packages
......
vue.config.js
then I run the vue service command: "vue ui" and view the plugin in the browser, throw an error:
Error: ENOENT: no such file or directory, scandir 'd:\vscode\crucian\crucian-vue-ui/src/locales'
at Object.readdirSync (fs.js:750:3)
at getLocales (d:\vscode\crucian\crucian-vue-ui\node_modules\vue-cli-plugin-i18n\ui.js:47:13)
at setupAddon (d:\vscode\crucian\crucian-vue-ui\node_modules\vue-cli-plugin-i18n\ui.js:94:21)
at api.onPluginReload.project (d:\vscode\crucian\crucian-vue-ui\node_modules\vue-cli-plugin-i18n\ui.js:117:7)
at fns.forEach.fn (C:\Users\jkiwen\AppData\Roaming\npm\node_modules@vue\cli\node_modules_@[email protected]@@VUE\cli-ui\apollo-server\connectors\plugins.js:255:21)
at Array.forEach ()
at callHook (C:\Users\jkiwen\AppData\Roaming\npm\node_modules@vue\cli\node_modules_@[email protected]@@VUE\cli-ui\apollo-server\connectors\plugins.js:255:7)
at Timeout.setTimeout [as _onTimeout] (C:\Users\jkiwen\AppData\Roaming\npm\node_modules@vue\cli\node_modules_@[email protected]@@VUE\cli-ui\apollo-server\connectors\plugins.js:201:9)
at ontimeout (timers.js:424:11)
at tryOnTimeout (timers.js:288:5)
then I saw the code of ui.js the code set the "localeDir" as absolute path "src"
function setupAddon (path, options) {
debug(setupAddon: path -> ${path}, options -> ${options}
)
const localeDir = options.localeDir
setSharedData('order', 'asc')
const env = readEnv(${path}/.env
)
const current = env['VUE_APP_I18N_LOCALE'] || 'en'
const defaultLocale = env['VUE_APP_I18N_FALLBACK_LOCALE'] || 'en'
setSharedData('current', defaultLocale)
setSharedData('defaultLocale', defaultLocale)
debug(setupAddon: current -> ${current}, defaultLocale -> ${defaultLocale}
)
const locales = getLocales(${path}/src/${localeDir}
)
setSharedData('locales', locales)
const messages = getLocaleMessages(${path}/src/${localeDir}
, locales)
setSharedData('localeMessages', messages)
setSharedData('localePaths', getLocalePaths(messages))
}
const localePath = ${currentProject.path}/src/${currentConfig.localeDir}
So, the path 'src' can be used relative path ??
Or, How can I use the relative path in the project?
The library is already warning on the console about missing translations.
This is great, but I would like to setup a check on GitLab CI.
Is it planned to have a CLI checker?
Thanks.
If the Locales directory contains non json files (for example an index.js file), getLocales retrieves it as a locale and then getLocaleMessages fails to find the file with '.json' appended (fails to find 'index.js.json'.
As a result, the Localizations UI doesn't work.
Shouldn't getLocales look only for .json files or sub-directories ?
Thanks.
Please update the vue-i18n-extract
dependency to 1.0.2 or higher.
The new version has some fixes which makes the i18n report more reliable.
If vue-clie-plugin-i18n
is installed and you move all of your configuration to package.json, the following error is thrown when you run vue ui
.
(node:10494) UnhandledPromiseRejectionWarning: Error: Cannot find module '/apps/vue-sr-interview/vue.config'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at api.onPluginReload.project (/apps/vue-sr-interview/node_modules/vue-cli-plugin-i18n/ui.js:111:25)
at fns.forEach.fn (/Users/idoub/.nvm/versions/node/v10.15.3/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/
plugins.js:282:21)
at Array.forEach (<anonymous>)
at callHook (/Users/idoub/.nvm/versions/node/v10.15.3/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/plugin
s.js:282:7)
at Timeout.setTimeout [as _onTimeout] (/Users/idoub/.nvm/versions/node/v10.15.3/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apoll
o-server/connectors/plugins.js:212:9)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:10494) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async func
tion without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10494) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handl
ed will terminate the Node.js process with a non-zero exit code.
From the documentation, the "vue" field in package.json is valid configuration.
vue ui
, install and configure vue-clie-plugin-i18n
.vue.config.js
and add the following to package.json
"vue": {
"i18n": {
"locale": "en",
"fallbackLocale": "en",
"localeDir": "locales",
"enableInSFC": false
}
}
vue ui
and go to "Plugins". Error will print to console and page will fail to load.Add a blank vue.config.js
file (it does not need any content).
If i want to use this command line : "vue-cli-service i18n:report", i have error with windows 10 :
screen of error on vue-cli 3
http://prntscr.com/oc5brr
Hi there.
I'm trying to use this plugin without success. I'm getting the following warning and the translations is not applied to the component.
[vue-i18n] Cannot translate the value of keypath 'download-bar.better-visualized'. Use the value of keypath as default.
My vue.config.js
is with the default value and I've created a second locale, setting it to default (pt-BR).
Am I missing something here?
vue.config.js
module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options["transformAssetUrls"] = { 'img': 'src', 'image': 'xlink:href', 'b-img': 'src', 'b-img-lazy': ['src', 'blank-src'], 'b-card': 'img-src', 'b-card-img': 'img-src', 'b-carousel-slide': 'img-src', 'b-embed': 'src' } return options } ) }, pluginOptions: { i18n: { locale: 'pt-BR', fallbackLocale: 'pt-BR', localeDir: 'locales', enableInSFC: false } } }
pt-BR.json
{ "download-bar": { "better-visualized": "Melhor visualizado com Google Chrome ou Mozilla Firefox" } }
What about a translation generator command?
The goal is to permit the user to write translation keys or raw language text directly on the template like $t('hello !')
and then the command extract the translation and push it on the files for you.
Here is a PHP example: https://symfony.com/doc/current/translation.html#extracting-translation-contents-and-updating-catalogs-automatically
WDYT?
Since tsconfig.json allows comments (and trailing commas), some tsconfig.json cannot be parsed by JSON.parse()
.
https://github.com/kazupon/vue-cli-plugin-i18n/blob/master/generator/index.js#L136-L141
I found some libraries which can parse JSON with comments, but I'm not sure which one is suitable.
Hello,
When we load UI i don't have locales.
I have investigate on this error and this is because the currentProject
and currentConfig
.
This is caused because when start vue ui
the plugin is not reloaded.
And now i have fix that with write next code in onProjectOpen
const rawConfig = require(`${project.path}/vue.config`)
const config = (rawConfig.pluginOptions && rawConfig.pluginOptions.i18n)
? rawConfig.pluginOptions.i18n
: { localeDir: 'locales' }
if (!config.localeDir) { config.localeDir = 'locales' }
debug('onProjectOpen : load vue.config', config)
setupAddon(project.path, config)
currentProject = project
currentConfig = config
Thanks.
I try use localizations tab in new vue cli UI (/addon/org.kazupon.vue-i18n/)
After putting my project lang file in locales dir, i click localizations tab , my browser freeze for 20 sec before i see my keys and translations.
to support continuous translation in translation service, vue-cli-plugin-i18n provides the following commands:
vue-cli-service i18n:set
set the main locale message to localization service
vue-cli-service i18n:update
sync the main locale messages to localization service
vue-cli-service i18n:status
show the status of the localization service.
--progress
: show the current translation progress at localization service--locales
: show the current translation languagesvue-cli-service i18n:pull
pull the locale messages on localization service. default all locales on localization service.
--locale
: pull the target localeVUE_APP_I18N_LOCALIZATION_ID
: API user id of localization serviceVUE_APP_I18N_LOCALIZATION_TOKEN
: API token of localization serviceWe have hundreds of language keys and some of them are relatively long
This leads to a report like this:
...
β 1β¦ β en β /src/views/**************/Overview/Ovβ¦ β 9 β ***************.overview.crβ¦ β
...
(* = censored)
Can we define an option to define longer columns?
While invoking the plugin (both from the UI and through vue invoke
), with defaults kept as is, the Vue CLI crashes with the following stacktrace:
Error: Line 15: Unexpected token :
at ErrorHandler.constructError (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5012:22)
at ErrorHandler.createError (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:5028:27)
at Parser.unexpectedTokenError (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1985:39)
at Parser.throwUnexpectedToken (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:1995:21)
at Parser.expect (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2168:19)
at Parser.parseGroupExpression (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2764:27)
at Parser.inheritCoverGrammar (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2285:37)
at Parser.parsePrimaryExpression (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2348:38)
at Parser.inheritCoverGrammar (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2285:37)
at Parser.parseLeftHandSideExpressionAllowCall (/home/solarliner/.nvm/versions/node/v10.9.0/lib/node_modules/@vue/cli/node_modules/esprima/dist/esprima.js:2899:26)
Could you please show me how to use this plugin? I added it to my project using vue-cli (ui). Everything seems to be setup OK, i for the live of me, I can't figure out how to use and i cant find any docs.
In my main.js:
new Vue({ router, i18n, render: h => h(App) }).$mount('#app');
In my App, it doesnt know i18n.
Property or method "i18n" is not defined on the instance but referenced during render.
(I think I should use i18n.messages...?)
Is there any example somewhere?
vue-cli-plugin-i18n will soon be transferred to intlify organaization. After that, it will be developed and maintained on intlify.
The vue-cli-plugin-i18n
that has been released on npm will be released as @intlify/vue-cli-plugin-i18n
in near future.
Intlify is a new i18n project kickoff by @kazupon. π
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.