脚手架

脚手架以vue-cli为例进行记录，实际开发更推荐使用vite。

初始化脚手架

1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

2. 最新的版本是 5.x。

3. 文档: https://cli.vuejs.org/zh/。

初始化步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：vue inspect > output.js

模板项目结构

脚手架模板项目结构

请求代理

第一种方式：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

仅限一个服务器端口有效。

工作方式：请求了前端不存在的资源时，那么请求会转发给该服务器（优先匹配前端资源）

第二种方式：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite: {'^/api':''},
        ws: true,	//用于支持websocket
        changeOrigin: true	//用于控制请求头中的host值
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

可以配置多个代理，且可以灵活控制请求是否走代理。

配置略微繁琐，请求资源时必须加前缀。