I want to build a vue.js app for production with npm ci.
Should I put #vue/cli-service in devDependencies of my package.json and execute
npm ci
vue-cli-service --mode production
Or should I put #vue/cli-service in dependencies of my package.json and execute
npm ci --production
vue-cli-service --mode production
As indicated here:
"dependencies" : Packages required by your application in production.
"devDependencies" : Packages that are only needed for local development and testing.
If you look at how the vue cli bootstraps an application you'll see a minimal package.json look like:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
Depending on how you want to deploy your app, there are different ways. The one I usually use for my Vue projects is to have a two-fold deployment process:
build the app with vue-cli-service
deploy the app to whereever I want it to run
It is pretty handy to define a "deploy" script in your package.json once you have the deployment figured out, e.g.:
"scripts": {
"start": "npm run serve",
"build": "vue-cli-service build",
"deploy": "npm run build && ./deploy.sh",
},
"dependencies": {…
where your deploy.sh runs all the neccessary means for deployment. The Official Vue Documentation has further pointers towards deployment on many widely used platforms.
EDIT: I guess the answer to your question would be "You run npm run build with the build script as defined above". Because that is the way you build a Vue app for production. Further information: Documentation about Environment variables with vue-cli-service
Related
I am trying to migrate tests from jest to vitest. For all of my tests I need to use UTC timezone. Currently, I was able to achieve it by TZ=UTC in package.json (refer: https://github.com/vitest-dev/vitest/issues/1575#issuecomment-1171085461).
"scripts": {
"dev": "vite",
"serve": "vite preview",
"build": "vite build",
"test": "TZ=UTC vitest run",
"test:watch": "TZ=UTC vitest"
}
My all the tests pass successfully when I am running the tests from CLI by using npm test. But when it comes to run tests from intellij looks like the tests aren't picking the timezone information from package.json. Is it expected behaviour?
I am using v0.6.6 of vitest runner and IntelliJ IDEA 2022.2.3.
You should specify this option in the JetBrains screen instead of package.json, as they are not using CLI as you.
https://blog.jetbrains.com/webstorm/2022/11/webstorm-2022-3-beta/
If I execute the following commands from the root of my Vue app (v. 2.6.12)
rm -rf node_modules
npm install
npm run serve
I get the following error
sh: vue-cli-service: command not found
If I manually add the following symlink to node_modules/.bin the error does not occur
vue-cli-service -> ../#vue/cli-service/bin/vue-cli-service.js
But I shouldn't have to do this manually, i.e. if this symlink is required, it should be created when the #vue/cli-service package is installed.
I'm using NPM version 7.0.3 and have the following declared in the devDependencies section of package.json
"#vue/cli-service": "^4.5.6"
You may be able to skirt the issue by using the following in your package.json:
"serve": "./node_modules/.bin/vue-cli-service serve"
OR
"serve": "node ./node_modules/#vue/cli-service/bin/vue-cli-service.js serve"
This is just a temporary fix, though, as it is most likely an issue with npm not setting the correct path or npm not installing the binary properly. Try upgrading npm and nvm. See #bravemaster's comment on the github issue, as this contains several potential fixes.
npm install worked for me in the past, but check the package.json, which should roughly like this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
"devDependencies": {
...
"#vue/cli-service": "~4.5.0",
...
},
Vue cli must be installed with global flag.
npm install -g vue-cli-service
If error try same command with sudo.
Vue-cli should not be in your package.json as a dependency (not even in dev-dependencies) because it is used only to generate a new project from scratch, not being necessary to run/server/build a project. (in dev or production), as the scripts are set in scripts section from package.json.
Replacing NPM with Yarn 1.X resolved this issue
What is needed to run npm run build?
I have project vue
I want to install it to a new server
Do I only need to run npm install?
Usually npm run build will create a production build.
The build process does a lot of things for you:
transpiles JS code
bundles code and assets
uses cache busting techniques for assets
removes dead code
Using the production build is the way to go for production.
Later edit:
You should install npm to be able to run npm commands. You should also run npm install before running npm run build.
you need package.json that contains :
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
}
and also must contains dependencies like this
"dependencies": {
"style-loader": "^1.1.4",
"vue": "^2.6.11",
"vuex": "^3.3.0"
},
I have the following package.json file and I am building using webpack:
{
"name": "web",
"private": true,
"scripts": {
"build": "webpack --config webpack.config.js --mode development"
},
"devDependencies": {
"webpack": "4.21.0",
"webpack-cli": "3.1.2"
},
"dependencies": {
"jquery": "3.4.1"
}
}
How can I pass a parameter when using npm run build to use verbose so I can see build errors?
Try the following:
npm run build --verbose
(you can pass any parameter via npm run <command> after --).
To be more clear with regards to the first answer, using npm run build --verbose does increase the log level of the npm process, as noted here https://docs.npmjs.com/cli/v8/using-npm/logging. This does not necessarily bump any log level in the Webpack process itself.
The first answer would incur additional logging for the npm process. The parenthetical note is slightly misleading -- if you want to pass a parameter to an npm script to pass to the underlying scripts, you need to add a primary "--". So, while that answer does increase npm logging, it doesn't necessarily alter the webpack logging verbosity.
For example, if you have a linter scripts in npm:
"jest-preview": "jest-preview",
"lint": "eslint ./src",
"build": "webpack --config webpack.config.js --mode development"
If you want to utilize the "--fix" parameter to pass to eslint, you would run this npm script as:
npm run lint -- --fix
As can be seen on https://webpack.js.org/api/cli/, there is no --verbose option for build in webpack-cli. There are some facilities for log output verbosity configuration for the loaders and plugins that can be implemented in the webpack config. I would check that documentation for further information.
in packages.json I see scripts set to be run under specific environments .
"scripts": {
"prod": "node_modules/.bin/gulp build; NODE_ENV=production webpack --config webpack.config.prod.js --display-error-details",
"bower": "node_modules/.bin/bower",
"test": "NODE_ENV=test jest" , .....
my questions are :
1-where are these environments declared ?
2-what is the difference between NODE_ENV=test and NODE_ENV=development ?
3-how does npm understand them and how can it tell what is my current environment?
4- can you explain differences between how and when to run the mentioned scripts