首页 > 其他分享 >vue-cli-service

vue-cli-service

时间:2023-03-06 11:33:07浏览次数:45  
标签:vue dist cli service -- 默认值

是一个构建(build)编译vue项目的工具,提供了服务页面渲染的功能(serve)

它的功能就是把vue源码编译为静态页面输出到dest指定的目录。通常是dist目录,build构建运行后输出到dist的文件可以直接放到服务器上面渲染的!

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文件,只有css/html/js 还有图片,map文件等等。

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

用法: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,dist,cli,service,--,默认值
From: https://www.cnblogs.com/xjy20170907/p/17183146.html

相关文章

  • vue2项目增加eslint配置代码规范示例
    eslint用于代码检查,prettier用于代码格式化,具体操作如下1.安装以下eslint插件安装以下eslint插件,并增加.eslintrc.js配置文件,.eslintignore配置忽略检查的文件(1)eslint......
  • 使用vue ant design 分页以及表格分页改为中文
    <template><divid="app"><a-config-provider:locale="locale"><router-view/></a-config-provider></div></template><script>importzhC......
  • HttpClient单例
    publicclassHttpClientFactory{privatestaticHttpClient_httpClient=null;staticHttpClientFactory(){_httpClie......
  • HttpClient长连接
    privatestaticreadonlyHttpClient_httpClient;privateApiLoggerOptions_config;staticApiLogger(){_httpClient=newHttpClient();_httpClient.Timeout=......
  • .NET(C#) HttpClient单例(Singleton)和每次请求new HttpClient对比
    本文主要介绍.NET(C#)中,使用HttpClient执行求时,每次请求都执行newHttpClient创建一个实例和每次请求都使用同一个HttpClient(单例Singleton)分比区别。 1、每次请求创......
  • Vue+axios 解决跨域
    Vue+axios如何解决跨域问题?跨域问题是由于浏览器的同源策略限制导致的,同源策略是浏览器的一种安全策略,目的是保障用户的信息安全,防止恶意网站窃取数据。同源策略的限制......
  • Vue学习笔记之npm install编译时报"Cannot read properties of null (reading ‘pickA
    0x00概述在启动项目时候,没注意node版本,直接npminstall遇到该错误;该错误主要是由node高低版本导致的。 0x01node版本一致/**1.重新安装node解决2.删了nod......
  • Vue过滤器的使用详解(代码实现)
    过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据 过滤器,其实不是必须要用的东西,它只是vue给我们提供的新的数据处理方式......
  • Docker CLI docker buildx create 常用命令
    Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化。Doc......
  • Vue3 注册及使用全局方法
    新建map-func.js,在main.js中全局定义$mapFunc。map-func.jsfunctiongetLayer(layerId){ returnwindow.map.getLayer(layerId);}exportdefault{ getLayer};m......