Question

议程是在NativeScript Vue应用程序中使用某些标志和特定的api基本URL用于不同的模式，例如dev，local和prod。就像NativeScript angular具有environment。[mode] .ts文件一样？

通过参考VueJs文档，我尝试使用.env。[mode]文件 // https://cli.vuejs.org/guide/mode-and-env.html#environment-variables.com 但这不利于这种情况。

//这样的配置， module.exports = { NODE_ENV：“生产”， ROOT_API：“某些api网址” }

应该可以像这样访问配置整个应用中的process.env.ROOT_API。

Answer 1

您还可以为Webpack构建提供环境变量：

$ tns构建android --bundle --env.development --env.property = value   可以通过Webpack中的env对象访问它们   配置：

// webpack.config.js
module.exports = env => {
    console.dir(env); // { development: true, property: 'value' }
}

您可以像下面这样更新您的DefinePlugin，

new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
            "global.ENV_NAME": JSON.stringify(name),
            "global.ENV_PROPERTY": JSON.stringify(env.property),
            process: undefined,
        }),

现在应使用在编译时在命令行中传递的实际值替换在项目中任何地方使用global.ENV_PROPERTY。

如果您熟悉webpack，还可以配置CopyWebpackPlugin来将正确的环境文件复制到您的应用中，而不是为每个配置都添加变量。

如何在NativeScript Vue中为dev，local和prod api url设置环境文件标记？

1 个答案: