【vue学习笔记】vue-cli-service的使用
学习资料vue-cli项目中,会安装给一个名为vue-cli-service的命令。vue-cli-servie servevue-cli-service serve 会启动一个开发服务器(基于webpack-dev-server)并且附带了开箱即用的模块热重载(Hot-Module-Replacement)。用法:vue-cli-service serve [options] [entry]选项
·
vue-cli项目中,会安装给一个名为vue-cli-service的命令。
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 查看
更多推荐
已为社区贡献1条内容
所有评论(0)