用IONIC3很久了,但是一直没有看到IONIC3官方的相关文档有写关于开发、测试环境的建立或者设置,由此网上找了一番,小牛试刀终于成功搭建了测试和开发环境了,下面来分享一下相关代码与配置。
首先在src目录下创建一个config目录,建立三个文件,分别是webpack.config.js、environment.prod.ts、environment.dev.ts
webpack.config.js中的代码如下:
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
'@environment': path.resolve(__dirname + '/environment.' + process.env.IONIC_ENV + '.ts'),
};
return useDefaultConfig;
};
environment.prod.ts中的代码如下:
[cc lang=”JavaScript”]export const ENV = {
env: ‘prod’ ,
isDebugMode: false
apiUrl: ‘http://prod.com/’
};[/cc]
environment.dev.ts中的代码如下:
[cc lang=”Javascript”]export const ENV = {
env: ‘dev’,
isDebugMode: true,
apiUrl: ‘http://dev.com’
};[/cc]
在项目根目录中找到package.json在最后加入如下代码
"config": {
"ionic_webpack": "./src/config/webpack.config.js"
}
顺便再找到tsconfig.json在compilerOptions中输入如下代码:
"baseUrl": "./src",
"paths": {
"@environment": ["config/environment.prod"]
}
这样一来就可以在任何页面使用ENV变量了,使用方法如下:
import { ENV } from '@environment'
console.log(ENV.isDebugMode)