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

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

回到顶部