Request URL: http://114.115.245.128/api/uc…

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