从零开始搭建基于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.log(command, mode) // command 是脚本指令,mode是调用的模式
const envDir = `config`
const envFiles = [`