写点什么

Vue Cli Study

作者:程序员海军
  • 2022 年 7 月 21 日
  • 本文字数:2280 字

    阅读完需:约 7 分钟

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 [链式操作]

更细粒度的修改 pluginrule.

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 来修改pluginrule

新增 pluginrule 都是挂载到 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_ENVBASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

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

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

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

process.env.VUE_APP_SECRET
复制代码


总结不易!觉得不错的,欢迎转发.

发布于: 13 小时前阅读数: 27
用户头像

还未添加个人签名 2020.04.02 加入

🏅目前从事物流,铁路相关的前端全栈开发工作. 🏆2021年InfoQ写作平台-签约作者 🏆 🏆微信公众号:【前端自学社区】

评论

发布
暂无评论
Vue Cli Study_vuecli_程序员海军_InfoQ写作社区