wepy框架开发小程序配置自动匹配正式环境，开发环境请求url

￡神魔★判官ぃ 2021-11-18 00:48 382阅读 0赞

1.  scr下面创建config文件夹 并创建dev.js prod.js index.js三个文件  
    dev.js
    
        export default {
        	  url: '开发环境url'
        	}
    
    prod.js
    
        export default {
        	  url: '正式环境url'
        	}
    
    index.js
    
        ```
        import devConf from './dev'
        import prodConf from './prod'
        import {merge} from 'lodash'
        
        let config = {} // 配置文件对象，它将会被devConf或prodConf替换
        
        let env = process.env.NODE_ENV // 当前的项目环境
        console.log('env=' + env)
        if (env === 'dev') {
          merge(config, devConf)
        } else if (env === 'production') {
          merge(config, prodConf)
        }
        
        export default config
        
        ```
2.  wepy.config.js
    
        ```
        const path = require('path')
        var prod = process.env.NODE_ENV === 'production'
        
        module.exports = {
          wpyExt: '.wpy',
          eslint: true,
          cliLogs: !prod,
          build: {
            web: {
              htmlTemplate: path.join('src', 'index.template.html'),
              htmlOutput: path.join('web', 'index.html'),
              jsOutput: path.join('web', 'index.js')
            }
          },
          resolve: {
            alias: {
              counter: path.join(__dirname, 'src/components/counter'),
              '@': path.join(__dirname, 'src')
            },
            aliasFields: ['wepy', 'weapp'],
            modules: ['node_modules']
          },
          compilers: {
            less: {
              compress: prod
            },
            babel: {
              sourceMap: true,
              presets: [
                'env'
              ],
              plugins: [
                // **重点在这**
                'transform-class-properties',
                'transform-decorators-legacy',
                'transform-object-rest-spread',
                'transform-export-extensions',
                'transform-node-env-inline'
              ]
            }
          },
          appConfig: {
            noPromiseAPI: ['createSelectorQuery']
          }
        }
        
        if (prod) {
          module.exports.plugins = {
            uglifyjs: {
              filter: /\.js$/,
              config: {
              }
            },
            'imagemin': {
              filter: /\.(jpg|png|jpeg)$/,
              config: {
                'jpg': {
                  quality: 80
                },
                'png': {
                  quality: 80
                }
              }
            }
          }
        }
        
        ```

3.package.json

```
    	{
    	  "name": "charge",
    	  "version": "0.0.2",
    	  "description": "A WePY project",
    	  "main": "dist/app.js",
    	  "scripts": {
    	    "dev": "cross-env NODE_ENV=dev wepy build --watch",
    	    "build": "cross-env NODE_ENV=production wepy build --no-cache",
    	    "dev:web": "wepy build --output web",
    	    "clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf",
    	    "test": "echo \"Error: no test specified\" && exit 1"
    	  },
    	  "wepy": {
    	    "module-a": false,
    	    "./src/components/list": "./src/components/wepy-list.wpy"
    	  },
    	  "author": "zhouyumei",
    	  "license": "MIT",
    	  "dependencies": {
    	    "babel-plugin-transform-node-env-inline": "^0.4.3",
    	    "less": "^3.9.0",
    	    "redux": "^3.7.2",
    	    "redux-actions": "^2.2.1",
    	    "redux-promise": "^0.5.3",
    	    "wepy": "^1.6.0",
    	    "wepy-async-function": "^1.4.4",
    	    "wepy-com-toast": "^1.0.2",
    	    "wepy-redux": "^1.5.3"
    	  },
    	  "devDependencies": {
    	    "across-env": "^1.0.8",
    	    "babel-eslint": "^7.2.1",
    	    "babel-plugin-global-define": "^1.0.3",
    	    "babel-plugin-transform-class-properties": "^6.24.1",
    	    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    	    "babel-plugin-transform-export-extensions": "^6.22.0",
    	    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    	    "babel-preset-env": "^1.6.1",
    	    "cross-env": "^5.1.3",
    	    "eslint": "^3.18.0",
    	    "eslint-config-standard": "^7.1.0",
    	    "eslint-friendly-formatter": "^2.0.7",
    	    "eslint-plugin-html": "^2.0.1",
    	    "eslint-plugin-promise": "^3.5.0",
    	    "eslint-plugin-standard": "^2.0.1",
    	    "less": "^3.8.1",
    	    "wepy-compiler-babel": "^1.5.3",
    	    "wepy-compiler-less": "^1.3.12",
    	    "wepy-eslint": "^1.5.3",
    	    "wepy-plugin-imagemin": "^1.5.3",
    	    "wepy-plugin-uglifyjs": "^1.3.7"
    	  }
    	}

4.开发环境执行 npm run dev 正式环境执行 npm run build

## 注意安装`npm install babel-plugin-transform-node-env-inline --save`反正运行报错缺啥安装啥(手动滑稽) ##

1.  使用 如有封装好的接口api文档里

//首先引入
    import __CONFIG__ from '../config/index'
    //取得url
    const baseUrl=__CONFIG__ .url