iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-cli-service的参数配置过程
  • 854
分享到

vue-cli-service的参数配置过程

vue-cli-servicevue-cli-service配置vue-cli-service参数 2023-05-18 11:05:29 854人浏览 八月长安
摘要

目录Vue-cli-service的参数配置vue-cli-service servevue-cli-service buildvue-cli-service inspectvue-

vue-cli-service的参数配置

vue-cli-service serve

Usage: vue-cli-service serve [options]

Options:

--open 服务器启动时打开浏览器

--copy 将URL复制到服务器启动时的剪贴板 (直接到浏览器去粘贴就OK了 Http://localhost:8080/)

--mode 指定环境模式 (默认: development)

--host host 地址 (default: 0.0.0.0)

--port 端口号 (default: 8080)

--https 使用https (default: false)

vue-cli-service build

Usage: vue-cli-service build [options] [entry|pattern]

Options:

--mode 指定环境模式 (default: production)

--dest 指定输出目录 (default: dist)

--modern 构建两个版本的 js 包:一个面向支持现代浏览器的原生 ES2015+ 包,以及一个针对其他旧浏览器的包。

--target 允许您以项目库或WEB组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ???

--name lib或者web组件库的名称 (default: "name" in package.JSON or entry filename)

--no-clean 在构建项目之前不要删除输出目录(dist)

--report 生成report.html以帮助分析包内容

--report-json 生成report.json来帮助分析包内容

--watch 监听 - 当有改变时 自动重新打包~

vue-cli-service inspect

使用它vue-cli-service inspect来检查Vue CLI项目中的webpack配置。有关更多详细信息,请参阅检查Webpack配置

Usage: vue-cli-service inspect [options] [...paths]

Options:

--mode 指定环境模式 (default: development)

vue-cli中执行的vue-cli-service

最近又整回vue去了,不说了,还是脚手架先整吧。

假设你已经通过vue create vue-base

有了vue-base 项目

然后我看到

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

这里执行的是vue-cli-service

开心 又来活儿了

我好奇它的webpack基础配置是什么?就是我本地项目文件不做任何vue.config.js的配置,它能实现什么?

vue-cli-service 其实执行的是 node_modules/.bin/vue-cli-service

最终是执行了@vue/cli-service

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

这里看到首先去new Service,这里初始化配置

然后执行了

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

run函数里面先执行了this.init 把默认配置初始化好

然后执行了command 这里以server为例,去执行了 lib/commands下面对应的serve.js文件

可以看到这里面也有一些配置,覆盖了之前的初始化的配置

lib/commands/serve.js

const defaults = {
  host: '0.0.0.0',
  port: 8080,
  https: false
}

如何更改vue-cli-service里面默认的端口号呢?

把启动命令更改为vue-cli-service serve --port 7001

后续可以看到在这里把初始化的很多参数加到 webpack配置里面来

Service.js文件里面

loadUserOptions 这个方法里面获取了用户的vue.config.js命名的文件信息或者是package.json 里面 vue字段的信息

关于配置 Service.js这里

const { defaults, validate } = require('./options')
options.js
export default {}

出来一份配置

说一下这个文件里面引入的@vue/cli-shared-utils 就像一个校验一样,这里处理的很棒!

const builtInPlugins = [
      './commands/serve',
      './commands/build',
      './commands/inspect',
      './commands/help',
      // config plugins are order sensitive
      './config/base',
      './config/CSS',
      './config/prod',
      './config/app'
    ].map(idToPlugin)
    if (inlinePlugins) {
      plugins = useBuiltIn !== false
        ? builtInPlugins.concat(inlinePlugins)
        : inlinePlugins
    } else {
      const projectPlugins = Object.keys(this.pkg.devDependencies || {})
        .concat(Object.keys(this.pkg.dependencies || {}))
        .filter(isPlugin)
        .map(id => {
          if (
            this.pkg.optionalDependencies &&
            id in this.pkg.optionalDependencies
          ) {
            let apply = () => {}
            try {
              apply = require(id)
            } catch (e) {
              warn(`Optional dependency ${id} is not installed.`)
            }

            return { id, apply }
          } else {
            return idToPlugin(id)
          }
        })
      plugins = builtInPlugins.concat(projectPlugins)
    }

里面有一个这个对象,配置各个命令和配置,看起来是做了prod和base的区分配置 后面是做了一个合并

prod.js里面看到

首先是通过webpack-chain 链接的各个配置

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV === 'production') {
 	 production 环境
      webpackConfig
        .mode('production')   //瞧这里设置了mode
        .devtool(options.productionSourceMap ? 'source-map' : false)
	
      // keep module.id stable when vendor modules does not change
      webpackConfig
        .plugin('hash-module-ids')
          .use(require('webpack/lib/HashedModuleIdsPlugin'), [{
            hashDigest: 'hex'
          }])

      // disable optimization during tests to speed things up
      if (process.env.VUE_CLI_TEST) {
        webpackConfig.optimization.minimize(false)
      }
    }
  })
}

在base.js

然后你就看到了这么些的默认配置

webpackConfig
      .mode('development')
      .context(api.service.context)
      .entry('app')
        .add('./src/main.js')
        .end()
      .output
        .path(api.resolve(options.outputDir))
        .filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
        .publicPath(options.publicPath)

基础的entry ,output

alias
        .set('@', api.resolve('src'))
        .set(
          'vue$',
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )

配置了别名 @指向项目src目录

以下是在 vue 2的项目中,一旦换成 vue 3的项目就没了,所以放在了try catch中

这里可以看到对, .vue文件启用了cache-loader,缓存,启用了vue-loader 这个来转换vue文件

继续往下处理了images、svg、media、fonts文件

很意外的看到了关于.pug后缀文件的处理,可能是其它包里面的?这里没有仔细去看了

最后

增加了terser默认的内置压缩工具包,做压缩

这里的配置有一个terserOptions.js文件

更改的

https://cli.vuejs.org/zh/config/#vue-config-js

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue-cli-service的参数配置过程

本文链接: https://www.lsjlt.com/news/211992.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue-cli-service的参数配置过程
    目录vue-cli-service的参数配置vue-cli-service servevue-cli-service buildvue-cli-service inspectvue-...
    99+
    2023-05-18
    vue-cli-service vue-cli-service配置 vue-cli-service参数
  • vue-cli配置使用Vuex的全过程记录
    目录前言安装使用模块化管理vuex状态持久化总结前言     在vue开发用我们常常会用到一些全局的数据,比如用户信息、用户权限、一...
    99+
    2024-04-02
  • vue-cli使用stimulsoft.reports.js的过程是怎样的
    vue-cli使用stimulsoft.reports.js的过程是怎样的,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。vue-cli使用stimulsoft....
    99+
    2023-06-22
  • vue-cli中devServer.proxy相关配置项的使用
    目录devServer.proxy相关配置项的说明devServer.proxy中的 changeOrigin 参数devServer.proxy中的 pathRewrite 参数d...
    99+
    2024-04-02
  • Vue路由组件通过props配置传参的实现
    目录一、基于params参数传递1、index.js(路由配置)2、Box_1.vue(父路由组件 - 发送参数) 3、Menu_1.vue(子路由组件 - 接收参数)二、...
    99+
    2024-04-02
  • Vue打包路径配置过程
    目录Vue打包路径配置1. 配置文件2. 打包示例(npm/cnpm run build)解决打包路径配置的问题问题原因解决Vue打包路径配置 1. 配置文件 module.expo...
    99+
    2024-04-02
  • vue-cli基础配置及webpack配置修改的示例分析
    这篇文章主要为大家展示了“vue-cli基础配置及webpack配置修改的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-cli基础配置及webp...
    99+
    2024-04-02
  • Vue路由组件如何通过props配置传参
    本篇内容介绍了“Vue路由组件如何通过props配置传参”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体如下:一、基于params参数传递...
    99+
    2023-07-02
  • vue-cli中webpack配置文件的示例分析
    这篇文章主要为大家展示了“vue-cli中webpack配置文件的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-cli中webpack配置文件的...
    99+
    2024-04-02
  • vue-cli配置文件之config的示例分析
    这篇文章主要介绍了vue-cli配置文件之config的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先我们先看一下config的...
    99+
    2024-04-02
  • vue-cli 3配置打包优化的示例分析
    这篇文章主要为大家展示了“vue-cli 3配置打包优化的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-cli 3配置打包优化的示例分析”这篇文...
    99+
    2024-04-02
  • 使用vue-cli搭建SPA项目的详细过程
    目录一、vue-cli构建SPA项目及SPA项目结构介绍1.1利用vue-cli构建SPA1.2spa的访问过程:1.3如何安装vue-cli命令二、SPA完成路由的开发步骤三、嵌套...
    99+
    2024-04-02
  • vue-cli中ESlint配置文件eslintrc.js的示例分析
    这篇文章将为大家详细讲解有关vue-cli中ESlint配置文件eslintrc.js的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:1.eslint简...
    99+
    2024-04-02
  • 在vue-cli搭建的项目中怎么配置sass
    这篇文章主要为大家展示了“在vue-cli搭建的项目中怎么配置sass”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“在vue-cli搭建的项目中怎么配置sass...
    99+
    2024-04-02
  • 如何通过properties文件配置web.xml中的参数
    目录前言实现思路web.xml中需要修改的部分filter.properties文件PropUtils工具类查看web.xml参数启动服务器进行测试web.xml前言 因为公司项目需...
    99+
    2024-04-02
  • vue-cli中babel配置文件.babelrc的示例分析
    这篇文章给大家分享的是有关vue-cli中babel配置文件.babelrc的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue-cli脚手架工具根目录的babelrc...
    99+
    2024-04-02
  • 脚手架(vue-cli)创建Vue项目的超详细过程记录
    目录cli3.x/4.x创建Vue项目1.创建项目2.项目手动配置3.选择vue版本4.路由模式5.配置文件的存放位置6.配置保存项目创建成功总结 cli3.x/4.x创建...
    99+
    2024-04-02
  • java多线程参数如何配置
    在Java中,可以通过设置以下参数来配置多线程: 线程数(Thread Count):可以设置同时运行的线程数量。可以根据系统的...
    99+
    2024-02-29
    java
  • Vue子组件内的props对象参数配置方法
    目录一、简单数据类型1、布尔类型 Boolean正确写法 :2、数字类型 Number正确写法 :3、字符串类型 String正确写法 :二、复杂数据类型1、数组 Array错误写法...
    99+
    2024-04-02
  • vue-cli如何打包使用history模式的后端配置
    这篇文章主要介绍vue-cli如何打包使用history模式的后端配置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!apache的配置这是windows下的在httpd-vhosts...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作