配置开发环境与生产环境

• angular

# 正常angular开发流程

1. 配置environments文件
//在app/environments.ts文件中
export const environment = {
  production: false,
  baseUrl: 'http://dev.com'; //开发环境地址
};

//在app/environment.prod.ts文件中
export const environment = {
  production: true,
  baseURL: 'http://production.com'; //生产环境地址
};

2. 配置angular.json文件
"production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
// 这里一般不用改，按默认的就行。

3. 在我们具体使用的接口中。
import { environment } from '../../environments/environment';
const patientDetail = params => post(environment.baseUrl, params); //患者详细。病人确诊记录页面。
// 必须依照这种形式导入environment。

4. 最后打包用命令
- `ng build --prod` 或
- `ng build --prod --configuration=production` 或者改配置文件 ：
- "build": "ng build --prod" => 用命令  `ng build`

# 如果后端并未处理跨域。在开发环境中
1. 在根目录下新建 proxy.config.json 文件
{
    "/api": {
        "target": "http://122.227.55.154:8180/phpapi/", 
        "secure": false,
        "pathRewrite": {"^/api": ""}
    }
}

2. 在package.json文件中，把start改为：
   "start": "ng serve --proxy-config proxy.config.json"

3. 在开发过程中运行，`npm start` 就行了。

注意： 如果1,2,3步骤正确执行，最后打包命令用到是 ng build，那么生产环境的地址并不会加载出来。加载出来的还是开发环境的地址。

相反，若用ng build --prod 。开发环境的地址不会加载出来，生产环境的地址会加载出来。

ng build --prod 和 ng build --prod --configuration=production 作用相同。

• Vue

# 开发环境配置
// 一般开发环境会跨域，所以先解决跨域问题。
// config/index.js , 在proxyTable对象里面添加代码。
'/api': {
  target: 'http://dev.com',   //这里填自己的接口地址
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/'
  }
}

# 生产环境配置
//进入config/prod.env.js，添加属性BASE_API为自己的生产环境地址即可
module.export = {
    NODE_ENV: '"production"',
    BASE_API: '"http://production.com"' //填生产环境baseUrl
}

# 接口如何写（最重要）api.js文件中。
let BaseUrl = '';
if (process.env.NODE_ENV === 'development'){
    console.log(process.env.NODE_ENV)
    BaseUrl = '/api';
}
if(process.env.NODE_ENV === 'production' ){
    BaseUrl = process.env.BASE_API
}

const rank = params => get(BaseUrl + '/top/list',params); //排行榜
......

//当为开发环境时，地址为'/api/top/list'
//当为生产环境时，地址为 'http://production.com/top/list'