vux踩坑指南 i18n国际化踩坑指南 i18n国际化含demo

创建vue脚手架等这里就不一一赘述了~~
若初次使用vue 请移步 链接

第一步下载 vux

npm install vux -s

第二部（见官网介绍）

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

这个时候如果你直接照搬的话不做任何修改肯定会报
originalConfig is not undefined
那这个是必须的啊，定义都没有定义，直接使用肯定会出这个错，接着我们看下注释 原来的 module.exports 代码赋值给变量 webpackConfig 这个是什么意思，我们认真查看 webpack.base.conf.js 中在最后module.exports=｛xxxx｝如果你要问这个是什么意思话，在没有接触过node情况下这里是想不明白的module我并没有定义啊,这些知识要归于node管了，在node环境下每一个js文件都是一个函数他带给的参数就有(exports, require, module, __filename, __dirname),module.exports这个在其他文件require的时候返回的是模块对象本身,返回的是一个类 .也是就是我赋的这个对象。详情转步 链接
注释的意思是让我们把原来

module.exports=｛
// 很多参数
｝

赋值给 webpackConfig 最后在抛出
配置代码如下

/*
 * @Author: your name
 * @Date: 2020-05-15 14:08:29
 * @LastEditTime: 2020-05-15 15:33:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \DATA-CENTERc:\Users\Administrator\Desktop\vue-vux\vue-vue\build\webpack.base.conf.js
 */
/* eslint-disable */
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');
const vuxLoader = require('vux-loader')


const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay,
  },
});

function resolve (dir) {
  return path.join(__dirname, '..', dir);
}
/******/
// 把原来的module.exports赋值给originalConfig
var originalConfig = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    },
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig,
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]'),
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
        },

      },
      { test: /.less$/, loader: "style-loader!css-loader!less-loader", }
    ],
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },
}
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

重中之重

如果以上配置完还是会报错 vux-loader xxxxx lessxxxxx等等的错，首先要知道为什么出错 官网没有明确的指出需要下载vux-loader 但是我们js文件中require了这个插件，那如果你没有下载肯定是会出错的。
所以首先

npm i vux-loader -s

其次如果是less loader等等的错，就说明ui 本身是使用了less 后续使用时是需要走loader的上面代码已是正确的配置如果发生错误需要

npm i less@3.11.1 -s

高版本less可能会出问题下载指定版本

i18n

首先千万记得 new Vue 的时候一定要把i18n 挂进去
如果出错 _t is not undefined 问题 我第一次也遇到了说明$t已经进入了我引入的这个插件但是为什么会出错,一开始以为是我的属性没有写对，但是核实了是有该属性的

既然使用￥t是进入了代码于是我将该方法toString（），其中有一句il18n=this.￥i18n 于是乎…
原来是这样写的

import VueI18n from './i18n/'
new Vue({
  el: '#app',
  router,
  VueI18n,
  components: { App },
  template: '<App/>',
});

改成

import i18n from './i18n/'
new Vue({
  el: '#app',
  router,
  i18n ,
  components: { App },
  template: '<App/>',
});

i18n中的index.js是这样写的
结构如下

效果图


最后该文章可能不是解决问题最快的一种表述方式，但我想解决问题思路是最重要，如果盲目的去百度copy不是最好的学习方式，理解了才最香~

:github vue-vux
demo中包含了常用的命令和描述

。。。
后续会用该ui做一个app 预计国庆前发布，还没有考虑好仿哪个app，有设计稿或者有需要的可以评论区或者加个人q，完全免费只是兴趣，最好给个star了谢！~