vue2企业级项目（三）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2企业级项目（三）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue2企业级项目（三）

引入mockjs，i18n

1、mockjs

项目下载依赖
```
npm install --save-dev mock
```

根目录创建mock文件夹，并创建mock/index.js

import Mock from "mockjs";

// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
  timeout: "300-600",
});

// 引入全部的modules内全部js文件，并分流进行处理
const modulesFiles = require.context("./modules", true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); // 正则提取子文件名称
  const value = modulesFiles(modulePath); // 获取文件对象
  modules[moduleName] = value.default; // 获取文件默认导出
  return modules;
}, {});

// 动态添加mock
for (let fileName in modules) {
  // 因为mock匹配规则是从上到下的，所以要对path长度进行排序
  // 避免提前匹配导致错误问题
  modules[fileName].sort(
    (last, next) => next.path.length - last.path.length,
  );

  // 添加mock匹配规则
  modules[fileName].forEach((item) => {
    let regexp = new RegExp(process.env.VUE_APP_PREFIX + item.path);
    Mock.mock(regexp, item.method, item.dispose.action);
  });
}

// mock验证 - 给ajax用的
export function proxyValid(url, method, date) {
  for (let fileName in modules) {
    modules[fileName].forEach((item) => {
      if (item.path === url && item.method === method) {
        const validRes = Mock.valid(item.dispose.template, date);

        if (validRes && validRes.length === 0) return true; // 验证通过

        // 验证不通过
        console.group(url.replace(/http:\/\//, ""));
        console.log("valid response data :>>> url: ", url);
        console.log("valid response data :>>> validMsg: ", validRes);
        console.groupEnd();
      }
    });
  }
}

// mockRandom继承添加创出电话号码
Mock.Random.extend({
  phone: function() {
    let phonePrefix = ["132", "135", "189", "135", "189"]; // 自己写前缀哈
    return Mock.Random.pick(phonePrefix) + Mock.mock(/\d{8}/); // Number()
  },
});

export default Mock;

创建mock/mockPort.js

import Qs from "qs";
import { checkDataType } from "@/utils/utils";

function MockPort({ template, action }) {
  this.template = template; // 模板

  this.action = action.bind(this); // 返回值

  // 解析返回get参数方法
  this.queryBackRes = function(url = "") {
    const urlArr = url.split("?");
    const dataString = urlArr[1] || "";
    return Qs.parse(dataString);
  };

  // 解析返回post参数方法
  this.paramsBackRes = function(body) {
    if (checkDataType(body, "string")) return JSON.parse(body);
    else return body;
  };

  // 分页获取list
  this.getPagingList = function(pagination, list) {
    let { pageNumber, pageSize } = pagination;
    const startIndex = (pageNumber - 1) * pageSize; // 开始截取位置
    const endIndx = pageNumber * pageSize; // 结束截取位置
    const totalPages = Math.ceil(list.length / pageSize); // 总页码数

    let rows =
      pageNumber > totalPages ? [] : list.slice(startIndex, endIndx);
    return { rows, total: list.length };
  };

  // 检查是否携带token
  this.checkToken = function(options, resObj) {
    let query = this.queryBackRes(options.url);
    if (query.id_token === "123456789") return resObj;
    return {
      statusCode: 401,
      code: -1,
      msg: "账户验证失败，请重新登录",
      data: null,
    };
  }.bind(this);
}

export default MockPort;

创建mock/modules/test.js示例

import MockPort from "../mockPort"; // 解析获取git数据

function testGet() {
  return new MockPort({
    template: {
      status: 1,
      data: "test",
    },
    action(options) {
      let query = this.queryBackRes(options.url);
      this.template.data += query;
      return this.template;
    },
  });
}

function testPost() {
  return new MockPort({
    template: {
      status: 1,
      data: "test",
    },
    action(options) {
      let query = this.paramsBackRes(options.body);
      this.template.data += query;
      return this.template;
    },
  });
}

export default [
  { path: "/testGet", method: "get", dispose: testGet() },
  { path: "/testPost", method: "post", dispose: testPost() },
];

src目录下创建api/mock.js示例

import request from "@/utils/request.js";

export const testGet = (params) => request.get("/testGet", params);
export const testPost = (params) => request.post("/testPost", params);

main.js添加一下内容

...

if (process.env.NODE_ENV === "development") require("../mock/index");
...

根目录创建vue.config.js

module.exports = {
  devServer: {
    open: true,
    port: "8080",
    overlay: {
      warning: false,
      error: false,
    },
  },
};

2、i18n

项目下载依赖
```
npm install vue-i18n@8.26.2 --save
```

src目录下创建i18n/index.js文件

import Vue from "vue";
import VueI18n from "vue-i18n";
import { getStorage } from "@/utils/storage.js";

Vue.use(VueI18n);

// 自动引入modules文件
const modulesFiles = require.context("./modules", true, /\.js$/);

const messages = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

const i18n = new VueI18n({
  locale: getStorage("local") || process.env.VUE_APP_locale,
  messages,
});

export default i18n;

main.js引入使用i18n，和vuex生成的store是一样的

创建i18n/modules/en.js、i18n/modules/zh.js

/***********en.js***************/
export default {
  hello: "Hello",
};

/***********zh.js***************/
export default {
  hello: "你好",
};

动态切换语言包文章来源地址https://www.toymoban.com/news/detail-620199.html
```
changeLanguage(type) {
    this.$i18n.local = type ? "en" : "zh"
}
```

到了这里，关于vue2企业级项目（三）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue2企业级项目（三）

vue2企业级项目（三）

1、mockjs

2、i18n

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2