从零开始搭建基于vite的vue项目

用vite创建vue项目

这里我们默认已经安装好了vite环境，如有疑问，可以参考官网的安装流程。

打开cmd，将目录指向你的代码仓库，然后输入一下命令。

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

其中my-vue-app既是项目名称也是文件夹名称。

其实vite的模板是非常多的，不过我这次是针对vue项目的一次创建记录。vite可使用模板可以参考官网的文档。

创建项目之后，不要忘记安装插件，只要在项目根目录下运行yarn或者npm install就可以了。

创建项目结构

这是我创建的项目的最基本结构。

/views中保存的是每一个页面，每一个页面都有属于自己的文件夹，并单独管理自己的独有的/assets /styles文件夹。

这样的优势是更加清晰的管理页面资源，可以快速定位资源位置。而且资源的名称也更加自由，按照资源功能命名就可以了，不需要加一堆前缀造成资源名称过长（访问路径同理，当然如果你配置了全局路径解析那就无所谓了）。

项目的环境配置

项目要根据用户运行不同的脚本，而调用不同的配置项。想要达到这个效果，项目就需要知道用户运行的是哪个环境。

这里我们要使用env进行区分。

创建env文件

在这里我为配置文件专门准备了一个文件夹（/config）进行管理。这里我主要包括一下配置文件：

.env // 默认配置文件，这里会配置默认的配置项
.env.development // 开发环境配置文件
.env.staging // 前后端联调环境配置文件
.env.production // 生产环境配置文件

配置文件可以包含你所需要的所有环境配置信息，比如当前文件根目录名称、前端端口号、后端IP等等。只要是你需要的都可以配置到配置信息中。

例如，我在.env.staging中的配置如下：

# 前后端联调(同后端测试服务配置)
# 后端IP
VITE_SERVER_IP='10.10.10.1'
VITE_SERVER_PORT='8080'
VITE_SERVER_ROOT='/server'

注：虽然我们可以在vite.config.js中对端口号进行配置，但是这个配置对vite preview是无效的。因此，我将端口方的配置放在了脚本中。
"serve": "vite preview --port 8102"这里的--port就是对端口号进行配置的指令。

根据环境动态更改vite配置

接下来，我们需要让配置文件判断现在是什么模式，根据不同的模式区分环境，以调用不同的配置文件。这里我们就需要dotenv这个插件了。

首先我们要安装dotenv这个插件：

npm install dotenv -D

然后在vite.config.js文件中进行如下操作：

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dotenv from 'dotenv'
import fs from 'fs'

// https://vitejs.dev/config/
export default ({
     command, mode }) => {
   
  console.