typescript 如何检查 Vue 是否处于开发模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49257650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How check if Vue is in development mode?
提问by Kokodoko
When I run my Vue app, the console shows:
当我运行我的 Vue 应用程序时，控制台显示：
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
So now I want to check if Vue is in development from inside my templates by using:
所以现在我想通过使用以下命令从我的模板内部检查 Vue 是否正在开发中：
console.log("mode is " + process.env.NODE_ENV)
But that only logs undefinedIs there a different way to find the NODE_ENV in Vue?
但这只是日志undefined有没有其他方法可以在 Vue 中找到 NODE_ENV？
My webpack config has this part:
我的 webpack 配置有这部分：
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Perhaps relevant: I use typescript, so I included this type declaration:
也许相关：我使用打字稿，所以我包含了这个类型声明：
declare var process: {
env: {
NODE_ENV: string
}
}
回答by Gene Parcellano
Webpack is used for almost all of my Vue projects, so I check to see if webpackHotUpdateis present.
Webpack 几乎用于我所有的 Vue 项目，所以我检查是否webpackHotUpdate存在。
if (webpackHotUpdate) {
console.log('In Dev Mode');
}
It's present in the windowobject if the webpack dev server is running.
window如果 webpack 开发服务器正在运行，它就会出现在对象中。
回答by Thomas
If you started with vue-cli (default webpack) then this should work:
如果您从 vue-cli（默认 webpack）开始，那么这应该可以工作：
connection: process.env.NODE_ENV === 'development'
? 'ws://localhost:5000'
: 'wss://myawsomeproject.org'
回答by Imre_G
Absolutely the most simple solution is to check for the window.location from you Vue component. That would look something like this:
绝对最简单的解决方案是从您的 Vue 组件中检查 window.location。那看起来像这样：
if (window.location.href === 'YOUR DEVELOPMENT URL') {
//preset form values here
}
回答by Marco Nascimento
Try using .env files.
尝试使用 .env 文件。
You can specify env variables by placing the following files in your project root:
.env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified mode .env.[mode].local # only loaded in specified mode, ignored by git
您可以通过将以下文件放在项目根目录中来指定 env 变量：
.env # 在所有情况下加载 .env.local # 在所有情况下加载，被 git 忽略 .env.[mode] # 仅在指定模式下加载 .env.[mode].local # 仅在指定模式下加载，被 git 忽略
plus
加
Env Loading Priorities
An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).
环境加载优先级
特定模式的 env 文件（例如 .env.production）将比通用模式（例如 .env）具有更高的优先级。
Docs: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
文档：https: //cli.vuejs.org/guide/mode-and-env.html#environment-variables
回答by sr9yar
Using .envfile is a common way to set environmental variables used in a lot of stacks. It makes sense to use it in Vue, not to try to reinvent the wheel.
使用.env文件是设置环境变量的常用方法，在很多堆栈中使用。在 Vue 中使用它是有意义的，而不是试图重新发明轮子。
Here's a little test, which will show what conditions and options you have.
这是一个小测试，它将显示您拥有哪些条件和选项。
Build your project this this command:
用这个命令构建你的项目：
vue-cli-service build
.env file:
.env 文件：
#.env
NODE_ENV=development
DDD=development
VUE_APP_NODE_ENV=development
Vue component:
Vue 组件：
mounted() {
console.log(process.env.NODE_ENV); // OUTPUT: production
console.log(process.env.DDD); // OUTPUT: undefined
console.log(process.env.VUE_APP_NODE_ENV); // OUTPUT: development
},
NODE_ENVis set by vue-cli-service. You can have multiple .envfiles and use vue-cli-service build --mode stagingto run different configurations.
NODE_ENV由vue-cli-service. 你可以有多个.env文件，并使用vue-cli-service build --mode staging来运行不同的配置。
There are environment variables used during build and client-side env variablesused in the component code. So you cannot use something like DDDin your client-side code, because Vue will ignore it.
组件代码中使用了构建期间使用的环境变量和客户端环境变量。所以你不能DDD在客户端代码中使用类似的东西，因为 Vue 会忽略它。
You can create your own env variable prefixed with VUE_APP_and use them in your client-side code for any checks. Docs ref.
VUE_APP_NODE_ENVwill work fine in our test.
您可以创建自己的带有 VUE_APP_ 前缀的环境变量，并在客户端代码中使用它们进行任何检查。文档参考。
VUE_APP_NODE_ENV将在我们的测试中正常工作。
NOTE
笔记
Parsing your url is not the best choice. If you use somethings like this window.location.href.indexOf("localhost"), it will not work for 127.0.0.1. There were a few times I had to run the project on a FQDN, and this check will not work for it eaither.
解析您的网址不是最佳选择。如果你使用这样的东西window.location.href.indexOf("localhost")，它不会为127.0.0.1. 有几次我不得不在 FQDN 上运行该项目，但此检查对它不起作用。
回答by Toxiro
This is how Vue checks wether it is in development mode:
这是 Vue 检查它是否处于开发模式的方式：
if (process.env.NODE_ENV !== 'production' &&
process.env.NODE_ENV !== 'test' &&
typeof console !== 'undefined'
)
Source: GitHub
来源：GitHub
Note: I removed the check config.productionTip !== falsefrom the code, because it is used only to turn off the "production tip" even if Vue is running in in development mode.
注意：我config.productionTip !== false从代码中删除了检查，因为即使 Vue 在开发模式下运行，它也仅用于关闭“生产提示”。
Gene Parcellano's answerworks great as long as you are using Webpack, but this mightbe a bit more robust.
只要您使用 Webpack，Gene Parcellano 的答案就很好用，但这可能会更健壮一些。
Edit:
编辑：
It would be easy to combine both answers like that:
将这两个答案结合起来很容易：
if (
window.webpackHotUpdate || (
process.env.NODE_ENV !== "production" &&
process.env.NODE_ENV !== "test" &&
typeof console !== "undefined"
)
)
回答by erb
For my particular case where I use pug and just wanted to conditionally add some elements to a component I set the options.dataprop of pug-plain-loaderin my webpack.config.jssuch that the loader looks like the following:
对于那些我用哈巴狗，只是想有条件地添加一些元素的成分我设置了我的具体情况options.data的道具pug-plain-loader在我webpack.config.js这样的加载器如下所示：
{
resourceQuery: /^\?vue/,
use: [
{
loader: 'pug-plain-loader',
options: {
// Use whatever you'd use to detect mode in the webpack config
data: { mode: process.env['PRODUCTION'] ? 'production' : 'development' },
},
},
],
},
}
Here's the full webpack.config.jsI'm using: https://github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88
这是webpack.config.js我正在使用的完整内容：https: //github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88
After which I could do:
之后我可以这样做：
if mode === 'development'
| Only shown in development mode
For the general case, this was harder than I first anticipated. Although someone good at Webpack could probably do this pretty easily.
对于一般情况，这比我最初预期的要困难。尽管擅长 Webpack 的人可能很容易做到这一点。
回答by user1192887
I know this is an old question but it may be helpful to new VueJS users to know this solution that I found in the current version of Vue (3.11):
我知道这是一个老问题，但了解我在当前版本的 Vue (3.11) 中找到的这个解决方案可能对新的 VueJS 用户有所帮助：
When running in dev mode the property Vue.config.devtoolsis true, in production mode it is false!
在开发模式下运行时，属性Vue.config.devtools为true，在生产模式下为false!
回答by Ben Clarke
I usually use:
我通常使用：
if(window.location.href.indexOf("localhost") >= 0) {
// Development mode
}
Or:
或者：
if(window.location.href.indexOf("localhost") < 0) {
// Production mode
}
By just searching for part of the development URL like localhostyou don't need to be so specific with the rest of the address. This works anywhere in your project, unlike process.env.NODE_ENVwhich won't work in the index.htmlfile for example.
只需搜索开发 URL 的一部分，就像localhost您不需要对地址的其余部分如此具体。这在您的项目中的任何地方都可以使用，例如process.env.NODE_ENV在index.html文件中不起作用。
