"自在的快乐便是佛家所说的那种境界，“要眠即眠，要坐即坐，如果一个人茶饭不宁，百种需求，千般计较，自然谈不上是真正的放下，又如何感受快乐？真正在的自由是建立于真正的放下之上，一切皆空即是一切皆有”"

--出自《断舍离》

01

前言

一些用到 VueAdminWork系列框架的大佬问的比较多的问题就是：我的项目怎么跑不起来，控制台报错。好不容易跑起来了，又不知道该如何打包上线等等一系列问题。 本来我觉得这些问题不是什么大的问题，也没太在意，但是问的人还不少，尤其是一些做后端开发的可能还不太清楚基于Vue下的整体的项目流程，下面小编就给大家说一下这些问题。

02

基于Vue开发的整体流程

在现在前端开发中基于Vue开发的环境和原来的前后混杂在一起的开发模式还是差别挺大的，可以通过 cdn引入Vue的方式，也可以通过Vue cli的方式。这里以 vue cli的方式来介绍， 大体的流程如下： 1. 安装 vue cli 2. 通过 cli 创建 vue 项目 3. 开发，编写代码 4. 调试解决bug 5. 准备打包上线 以上便是基于VueCli开发的基本流程，当然如果您使用的是Vite打包工具那在创建或者打包的时候还有点点差别的。 因为VueAdminWork大部分版本是基于Vite开发的，所以我们着重讲解一下在Vite下的配置问题。 03

项目运行不起来

当拿到VueAdminWork源码之后，首先是要把项目运行起来，但是很多大佬运行的时候就报错，如下图大部分错误像是这种的主要是因为 node 的环境版本太低了

因为 vite 对node的要求比较高，所以对低版本的node可能兼容性不那么好， 我们建议 node的版本是：v16.13.1 稳定版。

查看 node的版本方式

node -v

‍

如果不是 16.13.1的建议升级到此版本

04

如何把项目部署到服务器

当我们把项目都开发完成之后，要把项目放到服务器准备上线的时候，就不知道该怎么做了。

这个时候要用到以下命令了：

npm run build

当我们执行完这行命令之后，就可以在项目的根目录下面生成一个名叫 dist 的目录（默认是此目录），里面就放着vite为我生成好的代码。这个时候，就可以把里面的文件上传到服务器上的某个目录下，并且用 nginx 服务器指向这个目录。这里还是建议使用 nginx 做为服务器，tomcat 也可以，不过还是建议 nginx。配置好域名之后，就可以准备上线了。 05

怎么修改默认的打包目录dist名称

如果您不希望vite帮我们生成的默认输入目录名为dist，那么就就是自己修改 vite.config.ts 或者 vite.config.js 文件了。 当我们使用vite 创建好一个项目的时候，都会生成这个配置文件。 简单看一下：

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

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    vue(),
  ],
  server: {
    open: true,
  },
})

我们再添加一个 `build`的属性如下：

build: {
  outDir: 'my_dist',
},

my_dist 就是我们想要生成输出的目录，可以随便指定，但要符合目录的命名规范。

06

这个组件怎么使用，为什么我的出不来效果

VueAdminWork系列框架的组件库都是采用知名开源的组件库如：ElementUI、Antd、NaiveUI等，所以大家可以完全放心使用。

但是对于一些组件库带的组件使用不清楚，首先要去官网查文档，认真阅读一下该组件的使用说明，如果再解决不了，就通过微信群进行探讨。

如果您是授权客户，就直接找到专属的客服解决

07

写在最后

这里只列举了一些比较常见的问题，还有一些问题，只是个别人出现的情况，这里就不一一列举了，如果您有问题欢迎通过微信群随时找我们。