Concerning modes and environmental variables as documented here
https://cli.vuejs.org/guide/mode-and-env.html#modes
I was rather confused why I can't set the following variable to mock for example. As the document seems to say this will be the mode that you pass in!
process.env.NODE_ENV
I have create the following server-mock command string in my package.json as follows
"serve-mock": "vue-cli-service serve --mode mock"
But when I run
npm run server-mock
The process.env.NODE_ENV is still set to development and not to mock. Am I supposed to set this in the .env.mock file? I presumed that it would be set based on the mode that was passed in as mock?
Vue CLI's serve command uses the mode option to load environment variables from mode-specific .env files. It also sets the NODE_ENV to one of the three standard modes (test, development, or production) only if not already set. However, if the specified mode is not standard (as is the case with mock), Vue CLI defaults to development.
So, you could set NODE_ENV=mock inside .env.mock to bypass the NODE_ENV setting mentioned above.
Alternatively, you could set NODE_ENV on the NPM script's command line in *nix shells:
{
"scripts": {
"serve-mock": "NODE_ENV=mock vue-cli-service serve"
}
}
For a cross-platform solution (including Windows), you could install cross-env (as recommended in comments), and edit your NPM script as follows:
{
"scripts": {
"serve-mock": "cross-env NODE_ENV=mock vue-cli-service serve"
}
}
Related
I have an error when I want to run Jest because of moduleNameMapper settings.
I tried several methods, but nothing changes.
To reproduce:
clone the repo: https://github.com/zoztorun/reproduce-webpack-alias-error
npm install
npm run test
Since you're using Vue CLI, you should use #vue/cli-plugin-unit-jest, which can be added to your Vue CLI project with this command:
vue add unit-jest
This will also add a <rootDir>/test directory with a sample test, but that doesn't fit your project's test file pattern, which places *.spec.js adjacent to the source files.
To adapt the result to your project:
Delete <rootDir>/test (as it would be unused, and because it points to a nonexistent HelloWorld.vue)
Edit the jest config in package.json to be:
{
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"testMatch": [
"**/src/**/*.spec.[jt]s?(x)"
]
}
}
Delete your test NPM script, since #vue/cli-plugin-unit-jest automatically adds its own test:unit script, which must be used instead (i.e., use npm run test:unit).
nuxt.config.ts:
env: {
cmsUrl: process.env.CMS_URL || 'http://localhost:1337'
}
I'm setting CMS_URL as system variable on a production/staging mode, otherwise it would use a localhost in a dev mode.
However if i reuse this env variable inside nuxt.config.ts:
axios: {
baseURL: process.env.cmsUrl
}
My NUXT app won't even start, saying ECONNREFUSED 127.0.0.1:80, i assume thats because env variable is not working.
The problem was in the stage, where i was applying environment variables, i was applying them in a docker-compose file, with npm run start command, and i built image one stage before with npm run build, that's why my env variables wasn't picked at all.
I want to set environment variables to configure URL at runtime.
I use webpack to bundle the js and here is the plugin defined to make the NODE_ENV available during compile time.
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
//'TARGET_ENV': JSON.stringify(process.env.TARGET_ENV)
}
})
Here are the yarn I want to execute according to the targeted environment:
"test-kubernetes": "cross-env NODE_ENV=kubernetes-cluster webpack && yarn run testenv",
"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack --mode=development && webpack-dev-server --hot",
However process.env.NODE_ENV is undefined at runtime.
This issue seems to be related to cross-env since using:
SET NODE_ENV=kubernetes-cluster
instead of
cross-env NODE_ENV=kubernetes-cluster
on my Windows machine makes things work.
Any idea?
There is a regression since 5.2.0 for Windows environment. I managed to make things work switching back to 5.1.6.
Reference issue: https://github.com/kentcdodds/cross-env/issues/185
Let us assume we have a Vue.js project build with Vue-cli3 , package.json:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
...
}
Also, we have a plan to push our project to a public repository on GitHub, so we need different environment variables for public repo and for the local development.
Vue-cli 3 gives us modes: https://cli.vuejs.org/guide/mode-and-env.html#modes
I have such a files:
.env
.env.development
.env.production
.env.local
.env.development.local
.env.production.local
Content of .env:
NODE_ENV=production
VUE_APP_PATH=http://website.com/
VUE_APP_API_ROUTE=api/v1/
Content of .env.development:
NODE_ENV=development
VUE_APP_PATH=http://dev-website.com/
Content of .env.development.local:
NODE_ENV=development
VUE_APP_PATH=http://localhost:8080/
When I do npm run serve I expect process.env.VUE_APP_PATH will be equals http://localhost:8080/ but unfortunately it stills = http://dev-website.com/.
So, the problem is variables from local env files (i.e. .env.development.local) are not overwrite existed from another env file (i.e. .env.development).
How can I use this vue-cli approach to overwrite neccessary variables? The documentation tells about priority: An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env). but with .local files it doesn`t work.
You can pass in the --mode option within the npm script. So, in your instance you might want the serve script to look like:
vue-cli-service serve --mode development.local
If you wanted to test out serving your non-local development configuration you could copy the serve script and rename it serve:local and then edit the original serve script to look like this:
vue-cli-service serve --mode development
Which is really the actual default mode for serve out-of-the-box with CLI 3. We've just explicitly set the mode.
I am building a package.json and use "npm run" to run some scripts, to be exactly, https://docs.npmjs.com/misc/scripts.
My script would need to expand some environment variables and I want to make it cross platform compatible. For example, my script would say
"scripts": {
"build": "md %npm_package_version%\helloworld"
}
But it's currently running on Windows because the expansion of environment variables. Linux would use md $npm_package_version\helloworld.
Does npm comes with a mechanism to convert environment variables expansion so that it works across platforms?
To make it cross-platform, use cross-var:
"scripts": {
"build": "cross-var md %npm_package_version%\helloworld"
}
npm doesn't appear to have a cross platform way to expand environment variables, but you do have node at your disposal, so I'd recommend implementing all your scripts as node scripts, then you can access process.env and cross-platform filesystem functions, like mkdirSync.
package.json
"scripts": {
"build": "node utils/mdkir.js"
}
utils/mkdir.js
'use strict';
var fs = require('fs');
fs.mkdirSync(process.env.npm_package_version + '/helloworld');