使用命令行构建uni-app + vue3 + vite + vant并实现多环境打包

一. 构建

a. npm install -g @vue/cli

b. vue create -p dcloudio/uni-preset-vue my-project

c. 接下来会让选择uni-app模板类型

image.png

成功之后会显示下面的弹窗提示npm run serve

image.png

d. 搭建之后运行发现错误百度的方法都尝试了一遍还是不行错误截图如下

b0a169bcd7506fb46d640a7f9700d62.png

解决办法把vue/cli降级为4.0.5就可以了

由于没有及时的解决问题我选择了uni + vue3 + vite，接下来的配置多环境为配置的是uni + vue3 + vite

二. 配置多环境

1. 在package.json文件中添加自己想要的命令在这里我添加了四个分别代表开发环境、测试环境、预发布环境和正式环境配置的变量要用--mode开头 例如我写的--mode dev

   
   
   image.png

2. 配置相对应的环境配置我在src目录下面新建了config文件夹

   
   
   image.png

里面的主要内容是

export default {
  BASE_API: "https://", 也就是你不同的环境将要访问的不同的服务器
};

然后在env.js中根据package.json中配置的变量来访问config下面不同的文件

import dev from "./.env.dev.js";
import test from "./.env.test.js";
import pre from "./.env.pre.js";
import prod from "./.env.prod.js";
import demo from "./.env.demo.js";

const NODE_ENV = import.meta.env.MODE;

let ENV_VAR = null;
if (NODE_ENV === "dev") {
  ENV_VAR = dev;
} else if (NODE_ENV === "test") {
  ENV_VAR = test;
} else if (NODE_ENV === "pre") {
  ENV_VAR = pre;
} else if (NODE_ENV === "pro") {
  ENV_VAR = prod;
} else if (NODE_ENV === "demo") {
  ENV_VAR = demo;
}

export default ENV_VAR;

最后在request.js中引入

import ENV_CONFIG from "@/config/env";

三. 引入UI组件库（以vant为例）

1. 安装vant

npm i vant@next -S

2. 配置按需加载

npm i babel-plugin-import -D

3. 在postcss.config.js 加入配置项

   
   
   image.png

[
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true,
      },
      "vant",
    ],

4. 因为vant是用的less解析样式的所以要安装less

npm i less less-loader --save

5. 这样vant UI组件库就引入进来了但是会发现没有样式，这是因为我们还没有将vant的样式文件引入进来

import "vant/lib/index.less";

6. 由于是按需加载所以我们每用到一个UI组件我们就需要在项目中引入进来，正常情况下是要在main.js中引入的，我们将其抽离封装起来在src下新建vant.config.js文件然后我们用到什么就在里面添加什么，也可以在别的位置添加也可以起别的名字，接下里看一下vant.config.js文件里面的内容

import { Button, List, Cell, CellGroup } from "vant";

export function vant(app) {
  app.use(Button);
  app.use(List);
  app.use(Cell);
  app.use(CellGroup);
}

然后在main.ts中引入即可

image.png

import { vant } from "./vant.config.js";
vant(app);

这样就成功的把vant UI组件库引入到我们的项目中了 接下来就可以愉快的玩耍了

四. 使用alias配置别名（方便引用文件）

找到vite.config.js文件加入以下需要配置的信息

  resolve: {
    alias: {
      "@/": resolve(__dirname, "src"),
      "@/api": resolve(__dirname, "src/api"),
      "@/config": resolve(__dirname, "src/config"),
      "@/static": resolve(__dirname, "src/static"),
      "@/utils": resolve(__dirname, "src/utils"),
    },
  },

五·. 配置打包路径和项目启动自动打开浏览器

找到vite.config.js文件加入以下需要配置的信息

  base: "./", // 打包路径
  server: {
    open: true, // 启动项目自动弹出浏览器
    port: 8080, // 启动端口
  },