vue-cli使用相关 about blog

[buddywang]

问题

怎么配置 Git hook--CLI服务

https://cli.vuejs.org/zh/guide/cli-service.html#git-hook

依赖需要 polyfill 时怎么处理--浏览器兼容性

https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill

怎么构建一个多页应用

// vue.config.js
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

webpack-chain

[buddywang]

配置开发环境的请求代理：devServer

该配置只在开发环境有效，具有类似Nginx的反向代理的功能，并提供以下功能：

• 提供一个开发服务器，可以访问项目，并支持热模块替换

配置代理

当你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器（为了避免浏览器的同源策略问题）

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

详细配置看文档

参考

https://github.com/chimurai/http-proxy-middleware#proxycontext-config
https://webpack.js.org/configuration/dev-server/
https://cli.vuejs.org/zh/config/#devserver-proxy