记录接手一个 VUE项目的初始操作

背景

最近接受了一个前后端分离的项目，项目前端使用的是 vue.js. 接手项目之后，首先建议看一下 README.md 文件。一般情况下，项目的创建者都会大致写些东西在里面。

README.md 文件可能会有一下内容：

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

项目启动

npm install 这一步必不可少。环境准备完成之后，就可以执行  npm run serve 启动项目了。

在这里需要说明一下，一般情况下，使用什么执行脚本看你具体使用的是什么脚手架。我这里是因为有了项目说明，所以这么进行的流程。

项目配置文件

查找项目启动配置文件，比如是使用的什么工具启动的。这个一般是根据 启动脚本来判断。我的这个项目根目录下有个  vue.config.js 文件，这个是配置文件。

module.exports = {
  publicPath: './',
  devServer: {
    open: true, // 默认打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },
  //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: true,
  // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
    config
      .entry('index')
      .add('babel-polyfill')
  }
}

项目启动配置

在 package.json 文件中找到了如下代码：

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "preProduction": "vue-cli-service build --mode preProduction",
    "outTesting": "vue-cli-service build --mode outTesting",
    "lint": "vue-cli-service lint"
  },

看到这里也就明白了为什么之前 npm run serve 这个脚本可以启动项目。也清楚了 项目使用的 vue-cli 脚手架。那么 vue.config.js 文件里的配置就是按照 vue-cli 的规范来写的了。这里使用的 vue-cli 3.0版本。