vue-cli 生成项目配置本地mock服务以及proxy服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// vue.config.js
devServer: {
  // 配置mock服务，在 static/目录下，增加 mock/xxx.json 文件，作为请求接口地址
  // mock服务接口以 /mock 做为前缀
    before(app) { 
      app.get(/\/mock\/\w+\.json/ig, (req, res) => {
        // req['_parsedUrl'].pathname 是解析后的路径，
        // 我本人的接口请求都会额外带一个 _t 时间戳参数
        // 实际请求时会是 /mock/xxx.json?_t=3475734724 
        // 因此这里直接用解析后的隐藏参数req['_parsedUrl'].pathname
        // 如果你没有时间戳参数或者其他参数（非接口请求参数），可替换为 req.url 获取接口地址
        // 另外一种方法就是直接修改上面的正则表达式，将参数部分填进去
        fs.readFile(path.join(__dirname, `/static/${req['_parsedUrl'].pathname}`), 'utf8', (err, data) => {
          if (err) throw err;
          res.json(data);
        });
      });
    },
    proxy: { // proxy，根据不同的请求前缀可实现多处源头的代理,一下接口请求以 /api 为前缀
      '^/api': {
        target: 'http://xxx.xxx.xxx.xxx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }

SPA中入口文件（main.js）通常都比较大，如果采用按需加载的方式载入view-design 体积会更大。

2019年11月21日 做过实验，按需加载所有的组件，请求时main.js 的大小为8M，直接通过 Vue.use(ViewUI) 的形式，mai n.js 的大小为4M左右。

问题

配置了按需加载后，发现存在非Template中使用的组件，比如Message、LoadingBar这种，无法使用Vue.component(‘Message’, Message) 来全局注册。

解决方法：

1
2
3
4
5
6

// main.js 
import { Message } from 'view-design'
Vue.prototype.$Message = Message

// Home.vue
this.$Message.success(options)

按需加载

Iview 升级版 view-design 有个小坑，按需加载不能和全部引入同时使用，否则就会报错。

1
2
3
4
5
6
7

// .babelrc
"plugins": [
    ["import", {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
    }]
]

1. 如果要启用css module 需要在style标签中插入 module 属性，否则不会生效

2. 独立样式表文件的话需要在 style 标签中 @import ‘./App.scss’ 这样引入，仍然使用 :class=”$style.red” 这样的形式使用

3. autodll-webpack-plugin 插件 path 和webpack的 publicPath冲突

4. mini-css-extract-plugin 配置完loader之后还需要配置plugins，2019年11月12号因为忘记配置plugins，导致一致报错，看了半小时。

5. Vue-router 如果使用 history 模式，会有刷新页面就会404的问题，原因是SPA中当你刷新页面的时候实际请求的是该路径下的页面，但SPA只有index.html因此导致404，开发环境如果用webpack-dev-server，设置historyApiFallback属性为true，生产环境nginx配置try_files $uri $uri/ /index.html;

   Read more »

hello everybody,

在我热衷于编写一些笔记发布到hexo所生成的静态博客的时候，遇到了不少问题。其中就是hexo生成的静态资源发布到GitHub pages后并不能正确渲染数学公式。

环境

• Ubuntu 16.04 x64

ssh无密登录

创建 ssh 公私钥

1
2
3

ssh-keygen -t rsa
cd ~/.ssh/
cat id_rsa.pub

将公钥 id_rsa.pub 的内容 copy，链接上服务器

1

ssh root@[domain] -p [port]

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

Test - Math