Skip to content

vue-cli

安装

下载全局依赖

shell
npm install -g @vue/cli
# or
npm install -g @vue/cli --registry=https://registry.npmmirror.com

查看版本

shell
vue --version
# or
vue -V

升级版本

shell
npm update -g @vue/cli

卸载

shell
npm uninstall @vue/cli -g

创建一个项目

shell
vue create hello-world

vue-cli 创建的 vue 项目的模式与环境

模式与环境区分

以 vue-cli-service serve 脚本启动应用,process.env.NODE_ENV 的值为 development。

以 vue-cli-service build 脚本启动应用,process.env.NODE_ENV 的值为 production。

通过 cross-env,把脚本改成如下样子,就能通过 VUE_APP_DEV、VUE_APP_PROD 判断是开发还是生产环境。也可以通过 process.env.NODE_ENV 的值判断是开发还是生产环境。

还可以通过 dotenv 在不同模式(test、pre、prod)下定义不同的环境变量。

注意:cross-env 和 dotenv 的文件里定义的变量名,必须是 BASE_URL 或以 VUE_APP_ 开头。

json
  "scripts": {
    "dev:test": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode test",
    "dev:pre": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode pre",
    "dev:prod": "cross-env VUE_APP_DEV=true VUE_APP_PROD=false NODE_ENV=development vue-cli-service serve --mode prod",
    "build:test": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode test",
    "build:pre": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode pre",
    "build:prod": "cross-env VUE_APP_DEV=false VUE_APP_PROD=true NODE_ENV=production vue-cli-service build --mode prod"
  }

Released under the MIT License.