npm run xxx

如果在package.json文件中的scripts中配置了对应的脚本命令，则可以通过npm run xxx的方式运行脚本。
如下：npm run serve，npm run build，npm run lint

  1. {
  2.   "name": "xc",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "serve": "vue-cli-service serve",
  7.     "build": "vue-cli-service build",
  8.     "lint": "vue-cli-service lint"
  9.   },
  10.   "dependencies": {
  12.   },
  13.   "devDependencies": {
  15.   }
  16. }

npx xxx xxx

运行脚本也可以不用再package.json文件中配置脚本命令，可以使用npx xxx()

vue-cli-service

vue-cli项目中，会安装给一个名为vue-cli-service的命令。
vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载（Hot-Module-Replacement）。

  1. 用法：vue-cli-service serve [options] [entry]
  3. 选项：
  5.   --open    在服务器启动时打开浏览器
  6.   --copy    在服务器启动时将 URL 复制到剪切版
  7.   --mode    指定环境模式 (默认值：development)
  8.   --host    指定 host (默认值：0.0.0.0)
  9.   --port    指定 port (默认值：8080)
  10.   --https   使用 https (默认值：false)

除了通过命令行，可以使用vue.config.js中devServer字段配置开发服务器的参数；下面给出一段配置的例子：

  1. devServer: {
  2.     port: 8080,//配置默认端口号
  3.     before(app) {
  4.         if ('true' !== process.env.NO_MOCK) {
  5.             apiMocker(app, path.resolve('./mocker/index.js'));
  6.         }
  7.     },
  8.     disableHostCheck: true,// 关闭HOST 检查
  9. },

vue-cli-service build

ue-cli-service build 会在dist/ 目录下面产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好地缓存而做的 vendor chunk splitting。它的shunk manifest 会内敛在HTML里。

  1. 用法：vue-cli-service build [options] [entry|pattern]
  3. 选项：
  5.   --mode        指定环境模式 (默认值：production)
  6.   --dest        指定输出目录 (默认值：dist)
  7.   --modern      面向现代浏览器带自动回退地构建应用
  8.   --target      app | lib | wc | wc-async (默认值：app)
  9.   --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  10.   --no-clean    在构建项目之前不清除目标目录
  11.   --report      生成 report.html 以帮助分析包内容
  12.   --report-json 生成 report.json 以帮助分析包内容
  13.   --watch       监听文件变化

更多命令

  1. 使用 vue-cli-service help 查看

devServer配置项的disableHostCheck属性

devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配—host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

devServer配置

配置1

  1. devServer: {
  2.     disableHostCheck: true,
  3.     open: true,
  4.     host: '192.168.10.43', // 本机ip
  5.     port: 8080, // 本机端口
  6.     https: true,
  7.     proxy: 'https://bellonlinetest.bell.ai', // 需代理的地址
  8.     before: app => {}
  9.  },

配置2

  1. devServer: {
  2.   proxy: {
  3.    '/admin/': {
  4.       target: 'https://bellonlinetest.bell.ai', // 目标路径，别忘了加http和端口号
  5.       changeOrigin: true, // 是否跨域
  6.       pathRewrite: {
  7.         '^/admin': '/admin' // 重写路径
  8.         // '^/123': ''  // 比如/123/admin/being/classes/classInfo 会被替代成/admin/being/classes/classInfo
  9.       }
  10.     }
  11.   }
  12. }