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
生成的目录结构如下
