May 07, 2021 Vue CLI
In a Vue CLI project, @vue a command called vue-cli-service is installed. You can access this command in npm scripts with vue-cli-service, or from the terminal at ./node_modules/.bin/vue-cli-service.
This is the package.json that you use for the default preset project:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
You can call these scripts by npm or Yarn:
npm run serve
# OR
yarn serve
If you can use npx (the latest version of npm should already come with it), you can also call the command directly like this:
npx vue-cli-service serve
Tips
You can run more feature scripts using the GUI with the vue ui command.
Here's a GUI's webpack Analytic:
用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)
The vue-cli-service serve command starts a development server (webpack-dev-server)with out-of-the-box module Hot-Module-Exchange.
In addition to passing command-line parameters, you can also configure the development server .js the devServer field in the vue.config database.
The command-line parameter, entry, is specified as a unique portal, not an additional append entry. An attempt to override the .pages the entry in the "entry" will cause an error.
用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
The vue-cli-service build produces a production-usable package in the dist/directory, with JS/CSS/HTML compression, and an automated vendor chunk splitting for better caching. Its chunk manifest is inline in HTML.
Here are some useful command parameters:
用法:vue-cli-service inspect [options] [...paths]
选项:
--mode 指定环境模式 (默认值:development)
You can use vue-cli-service inspect to review the webpack config of a Vue CLI project. For more details, please refer to review webpack config.
Some CLI plug-ins inject additional commands into the vue-cli-service. F or @vue/cli-plugin-eslint injects the vue-cli-service lint command. You can view all injected commands by running the following commands:
npx vue-cli-service help
You can also learn the options available for each command in this way:
npx vue-cli-service help [command]
After installation, @vue/cli-service also installs yorkie, which makes it easy to specify Git hooks in the gitHooks field of package.json:
{
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
Attention
yorkie fork from husky and is not compatible with the latter.
Projects created with vue create can run without additional configuration. Plug-ins can also be designed to coexist with each other, so in most cases you only need to pick the features you need in the interactive command prompts.
But we also know that meeting every need is unlikely, and the needs of a project are constantly changing. P rojects created with the Vue CLI allow you to configure almost every corner of the tool without the need for eject. For more details, please refer to the Configuration Reference.