韩旭的博客

我们在开发项目时，经常会有开发环境与生产环境，分别会对应不同的请求地址与各种不同的变量，这个时候我们就可以使用 process.env 去抓取这两个文件写的变量，从而实现测试环境与生产环境的区分。使用上方命令，即可获取到不同的数据。

文章目录一、变更目录结构名称1.1、新增packages文件夹用于存放开发的组件。二、开始开发组件。三、使用组件。3.1、在main.ts中写入组件。四、如何将项目打包？4.1、配置 package.json 打包初始化。4.2、在package.json文件scripts标签中新增两个命令。五、推送项目到npm。一、变更目录结构名称首先我们看到的是一个新建好的 vue3 项目结构1.1、新增packages文件夹用于存放开发的组件。二、开始开发组件。在packages中新建一个这样的目录结构

文章目录为什么要配置静态资源路径？1、首先我们要清楚什么样的环境下我们需要配置静态资源路径？2、如何配置？为什么要配置静态资源路径？1、首先我们要清楚什么样的环境下我们需要配置静态资源路径？那肯定是不是单纯的一个前端写的单页面应用的时候，我们仔细想想，如果我们开发了一个新模块，但是不是基于原来项目开发的，而实更换了一个路径？不不不，只是说新起了一个子路径，相当于二级路径，那么这个时候我们还能用原来的默认的配置去寻找接口地址，静态资源地址吗？当然这样肯定是行不通的，所以说我们需要配置一下你当前这个模块

## 一、Vue-cli是什么，及什么是打包。#### 1.1 vue-cli是什么？vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。> 注意:也可以生成多页面哦！我们需要自己配置我们的vue.config.js 引入glog进行相应操作即可！

Webpack篇章11.1理解什么是webpack？1）简单的来说 webpack就是一个打包工具，把一些乱七八糟的文件，打包成一个文件，减少http请求次数1.2webpack 5个概念概念理解Entry入口，指示从那个文件开始打包，分析内部依赖Output输出，指示输出文件到哪里取，以及如何命名Loader可以简单的理解为翻译，放loader的用来...