Vue--Vue-CLI服务命令、项目结构、自定义配置

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue-CLI服务命令

在说Vue-CLI项目结构的时候，先来说下Vue-CLI常用的服务命令

CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。针对绝大部分应用优化过的内部的 webpack 配置；

在一个 Vue CLI 项目中， @vue/cli-service 模块安装了一个名为  vue-cli-service 的命令。

在 package.json 中的  scripts 指定  vue-cli-service 相关命令。

  • serve 启动一个开发环境服务器(基于 webpack-dev-server)，修改组件代码后，会自动热模块替换

  • build 会项目根目录下自动创建一个  dist/ 目录，打包后的文件都在其中，打包后的 js 会自动生成后缀为  .js 和  .map 的文件。js文件: 是经过压缩加密的，如果运行时报错，输出的错误信息无法准确定位到哪里的代码报错。map文件：文件比较大， 代码未加密，可以准确的输出是哪一行哪一列有错。

  • lint 使用 Eslint 进行检查并修复代码的规范，比如: 将  main.js 中的格式多加个空格 ，执行 npm run lint 后它会自动的去除多余空格 。

执行命令方式：

npm run serve
npm run build
npm run lint

Vue-CLI项目结构

在之前我们使用Vue-CLI自定义创建的项目结构如下

|-- node_modules: # 存放下载依赖的文件夹
|-- public: # 存放不会变动静态的文件，它与src/assets的区别在于，public目录中的文件不被webpack打包处理，会原
样拷贝到dist目录下
　　|-- index.html: # 主页面文件
　　|-- favicon.ico: # 在浏览器上显示的图标
|-- src: # 源码文件夹
　　|-- assets: # 存放组件中的静态资源
　　|-- components: # 存放一些公共组件
　　|-- views: #  存放所有的路由组件
　　|-- App.vue: # 应用根主组件
　　|-- main.js: # 应用入口 js
|-- .browserslistrc: # 指定了项目可兼容的目标浏览器范围, 对应是package.json 的 browserslist选项
|-- .eslintrc.js: # eslint相关配置
|-- .gitignore: # git 版本管制忽略的配置
|-- babel.config.js: # babel 的配置,即ES6语法编译配置
|-- package-lock.json: # 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项目时大家的依赖能保证一致.
|-- package.json: # 项目基本信息,包依赖配置信息等
|-- postcss.config.js: # postcss一种对css编译的工具，类似babel对js的处理
|-- README.md: # 项目描述说明的 readme 文件

关于  browsers 的配置如下：

代码               含义
last              2 versions 每一个主流浏览器的最后5个版本
last              2 Chrome versions 谷歌浏览器的最后两个版本
> 2%              市场占有量大于2%
> 2% in US        美国市场占有量大于2%
ie 6-8            ie浏览器6-8
Firefox > 20      火狐版本>20
Firefox < 20      火狐<20
since 2013        2013年之后发布的所有版本
iOS 7             指定IOS 7浏览器

 自定义配置

前面我们使用Vue-CLI自动生成项目，但往往满足不了我们实际开发项目的需求。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

官网：https://cli.vuejs.org/zh/config/

先创建一个vue.config.js文件

这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}

常用的配置

module.exports = {
    // 选项...
    // publicPath: '/demo2',
    devServer: {
        port: 8001, // 端口号，如果端口号被占用，会自动加1
        host: "localhost", //主机名， 127.0.0.1，  真机 0.0.0.0
        https: false, //协议
        open: true //启动服务时自动打开浏览器访问
    },
    lintOnSave: false, // 默认true，警告会被输出到命令行，但不会使得编译失败。如果为false，则不输出警告
    outputDir: "dist2", // 打包之后所在目录， 默认值 dist
    assetsDir: "assets", // 静态资源打包之后 存放路径 ，（相对于outputDir指定的路径）, 默认值 ''
    indexPath: "out/index.html", // index.html 主页面打包之后存放的目录（相对于outputDir指定的路径），默认值 index.html
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度 
    // filenameHashing: false, 打包时，静态文件不会生成hash值，一般不要这个
  }

然后执行下面命令进行构建

npm run build

生成的目录结构如下

以上是 Vue--Vue-CLI服务命令、项目结构、自定义配置 的全部内容， 来源链接： utcz.com/z/379131.html

回到顶部