mock服务

const fs = require('fs');const path = require('path')const ASYNC_PREFIX = '/async/*'function handerAsyncRequest (req, res) {    let data = '';    let reqPath = req.path;    let reqQuery = req.query;    let protocol = req.protocol;    let method = reqQuery['method'];    let pathStr = '';    let fileUrl = '';    if (method) {        pathStr = method.replace(/\./ig, path.sep) + '.json'    } else {        pathStr = reqPath.replace(/\/async/ig, '') + '.json'            }    fileUrl = path.join(__dirname, '..', 'mock', 'data', pathStr)    try {        data = fs.readFileSync(fileUrl, {            encoding: 'utf8'        });    } catch (e) {        data = e;    }    res.send(data);}function beforeServer (app, server) {    app.get(ASYNC_PREFIX, handerAsyncRequest)    app.post(ASYNC_PREFIX, handerAsyncRequest)}module.exports = {    beforeServer};
  • app.use(path, router/callback) 也可以实现, path不接受正则，会匹配以path开头的路径

webpack配置服务配置

devServer: {    before: beforeServer}

vue-loader.conf.js

transformToRequire: {    video: ['src', 'poster'],    source: 'src',    img: 'src',    image: 'xlink:href'}

在模板编译过程中，编译器可以将某些特性转换为 require 调用，例如 src 中的 URL。因此这些目标资源可以被 webpack 处理。例如 <img src="./foo.png"> 会找到你文件系统中的 ./foo.png 并将其作为一个依赖包含在你的包里。

资源 URL 转换会遵循如下规则：

  • 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
  • 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
  • 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源
  • 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了

plugins

  • directory-named-webpack-plugin 解决默认只使用index.js的问题，使用此插件可以解决a/a.js 引用问题

v-if / v-show