Vue Cli Study

Vue CLi 脚手架创建的项目结构解析

• Node_modules 存放下载的依赖文件

• public 存放静态文件， 它与 asstes 区别是： public 目录中的文件打包只会简单处理，文件名不回改变

• favicon.ico 浏览器要显示的图标， 打包时，会放到 dist 目录下

• Index.html 入口文件，打包后只会将其压缩放在 dist 目录下，其它不做改变

• src 源码文件夹

• assets 存放组件的静态资源，图片等

• compoents 存放公共组件

• router 存放路由文件

• index.js 存放路由配置

• views 存放路由组件文件夹

• App.vue 根组件

• main.js 应用入口

• .browserslistrc 指定项目可兼容的目标浏览器范围，对应的是 package.json 的 browserslist

• .eslintrc.js Eslint 配置

• .gitignore git 上传到 git 仓库要忽略的文件配置，如 node_modules, dist 等

• babel.confifig.js babel 配置

• Package-lock.json 用于记录项目当前状态下实际安装的各个包的来源和版本号等，保证其它人在 clone 项目后，npm install 安装项目依赖一致性

• package.json. 项目基本信息，包依赖配置信息等

• README.md 项目描述说明文件

• posts.config.js postcss 它是 css 的编译工具

src 文件夹下的文件打包后，文件名会发生改变，文件名后会加一个hash 值。

作用： 可以让浏览器能够热更新。 因为浏览器有缓存功能，如果文件名不改变，打包后浏览器加载还是使用缓存中的资源，内容得不到及时的更新。

Vue.config.js 自定义配置选项

使用vue-cli 创建项目后，它会包含一些项目的默认基本配置，如果想对项目自定义配置，创建符合当前项目的配置该怎么搞呢？

可以 通过 vue.config.js 来配置项目，它是一个可选配置文件，在项目根目录下创建，它会被@vue/cli-service 自动加载。

常用配置项

• devServer 开发 Server 配置

• lintOnSave 是否开启 ESLint 语法检查，默认开启，会直接在命令行提示

• outputDir 打包生成的文件名

• assetsDir 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

• indexPath 指定生成的 index.html 的输出路径 (相对于 outputDir)。

• productionSourceMap 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

module.exports = {    publicPath: "./", //部署的url，默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上    devServer:{        port: 4444, // 项目启动端口号， 如果端口被占用，会自动 +1         open: true,  //启动服务后自动打开浏览器        https: false, //协议        host: "localhost" //主机名    },    lintOnSave: false,  //默认为true， ESLint 语法检查    outputDir: "demo-project",  //默认为 dist， 项目打包后默认生成的文件名    assetsDir: "static",  //静态文件输出位置（js,css,img fonts），默认存放到打包文件夹下的根目录 。     indexPath: "haijun/index.html", //入口文件位置。 默认存放到打包文件夹下的根目录 。    productionSourceMap: false,   //打包后，不生成 .map 文件，加快打包构建。}

插件及规则配置

通过两种方式来 **修改 / 添加 **新配置

• configureWebpack

• chainWebpack

1. configureWebpack

• 它可以是一个对象：和 webpack 本身配置方式是一致，该对象将会被 webpack-merge 合并入最终的 webpack 配置

• 它也可以是一个函数：直接在函数内部进行修改配置

//1. 为函数时configureWebpack: config => {    if (process.env.NODE_ENV === 'production') {      // 为生产环境修改配置...    } else {      // 为开发环境修改配置...    }  }


//2. 为对象时configureWebpack: {    plugins: [      new MyAwesomeWebpackPlugin()    ]  }

两种使用场景

1. 简单配置，可以选用对象，它将会被webpack-merge 合并入最终的 webpack 配置

2. 如果需要基于环境有条件地配置行为，或者想要直接修改配置, configureWebpack 为函数

2. chainWebpack [链式操作]

更细粒度的修改 plugin 和 rule.

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。

<a href="https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7">更多详细使用配置</a>

通过使用 tap 来修改plugin 和 rule

新增 plugin 和 rule 都是挂载到 config 下。

//pluginconfig  .plugin(name)  .use(WebpackPlugin, args)
//ruleconfig.module  .rule(name)    .use(name)      .loader(loader)      .options(options)

module.exports = {  chainWebpack: config => {    config.module      .rule('vue')      .use('vue-loader')        .tap(options => {          // 修改它的选项...          return options        })  }}

模式和环境变量

环境

项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入.env.local          # 在所有的环境中被载入，但会被 git 忽略.env.[mode]         # 只在指定的模式中被载入.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

FOO=barVUE_APP_NOT_SECRET_CODE=some_value

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

获取当前系统使用的环境变量

process.env.VUE_APP_SECRET

总结不易！觉得不错的，欢迎转发.