vue-cli-service的使用

vue-cli项目中,会安装给一个名为vue-cli-service的命令。vue项目在package.json里面的scripts模块修改命令

vue-cli-servie serve

vue-cli-service serve 会启动一个开发服务器(基于webpack-dev-server)并且附带了开箱即用的模块热重载(Hot-Module-Replacement)。

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

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

devServer: {
    port: 8080,
    before(app) {
        if ('true' !== process.env.NO_MOCK) {
            apiMocker(app, path.resolve('./mocker/index.js'));
        }
    },
    disableHostCheck: true,
},

vue-cli-service build

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

用法: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       监听文件变化

使用 vue-cli-service help 查看更多命令

你可能感兴趣的:(js专栏,vue专栏,vue.js,javascript,webpack)