Vue - Vue Cli 3.0脚手架

安装包名称改为@vue/cli

npm install -g @vue/cli  //安装
npm view @vue/cli version  //npm查看最新版本

新建项目后，package.json 下的 script

 "scripts": {
    "serve": "vue-cli-service serve",
    "build:stage": "vue-cli-service build --mode staging",  
    //--mode环境模式，最终将会被process.env（environment的缩写）属性值拿到
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
  }

vue-cli-service serve (命令)

options 参数如下

Usage: vue-cli-service serve [options]
Options:
  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

vue-cli-service build

options 参数如下

Usage: vue-cli-service build [options] [entry|pattern]
Options:
  --mode        specify env mode (default: production)
  --dest        specify output directory (default: dist)
  --modern      build app targeting modern browsers with auto fallback
  --target      app | lib | wc | wc-async (default: app)
  --name        name for lib or web-component mode (default: "name" in package.json or entry filename)
  --no-clean    do not remove the dist directory before building the project
  --report      generate report.html to help analyze bundle content
  --report-json generate report.json to help analyze bundle content
  --watch       watch for changes

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
  devServer:{// 所有 webpack-dev-server 的选项都支持。
 			 //注意：有些值像 host、port 和 https 可能会被命令行参数覆写。
 	host:xx, //有些值像 publicPath 和 historyApiFallback 不应该被修改，
 	port:xxx,		 //因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
 	https:xxx,
 	//proxy:Object|string     //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
 			//你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
 	proxy: 'http://localhost:4000'//1、这会告诉开发服务器将任何未知请求
 	// (没有匹配到静态文件的请求) 代理到http://localhost:4000。
 	proxy: {    //2、如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

环境变量和模式

你可以替换你的项目根目录中的下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略