通过vue-cli命令行创建uni-app项目。调试微信小程序，vscode 开发 uni-app，微信小程序基础开发模板，基础架子搭建。vue3读取环境变量配置，编译配置

252人阅读 2025/3/18 14:25 总访问：5188264 评论：0 收藏：0 手机

分类: 前端

tn2>tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure，方便直接拉下来使用,不用每次起新项目都重复的去搭建一次

[TOC]

### 通过vue-cli命令行创建uni-app项目

官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

通过命令行创建vue3/vite的基础项目：
```
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
```

不行的话，直接点击那个gitee下载代码即可

![](https://img.tnblog.net/arcimg/notebook/c53f81f2eb5340019b9bf9a7364efb55.png)

然后就可以把下载好的项目用vscode,或者cursor开发了

### 安装好相关依赖
```
cnpm install
```
你可能还要设置一下cnpm或者npm的代理：
```
cnpm config set registry https://registry.npmmirror.com
```

#### sass 依赖也安装一下把
```
cnpm install sass sass-loader --save-dev
```

#### day.js的依赖装一下
```
cnpm install dayjs --save
```

### 然后编译一下uni-app项目导入到微信开发者工具里边去

#### 编译一下uni-app项目
```
npm run dev:mp-weixin
```

<img src="https://img.tnblog.net/arcimg/notebook/8fb8a830b99c46c0a80aafb5b4398e78.png" style="width:466px;height:auto;">

#### 把编译成功后的内容导入到微信开发者工具即可
编译好的dev内容在你项目根目录里边的这个位置:`\dist\dev\mp-weixin`

**把这个目录放到微信开发者工具中就行了！**
点击项目-->导入项目

<img src="https://img.tnblog.net/arcimg/notebook/381eef59a47f4c748f4aaa13e7f4b0fe.png" style="width:366px;height:auto;">

然后把刚刚编译出来的地址填上即可：

<img src="https://img.tnblog.net/arcimg/notebook/2a37c5c1a5b64370a37e2779424ead50.png" style="width:666px;height:auto;">

然后就行了，就可以开发在vscode中，修改后会自动编译，然后微信开发者工具里边也会自动变化


### 增加读取配置的与常用工具类封装。读取环境变量配置

#### 在项目根目录去创建几个配置文件
![](https://img.tnblog.net/arcimg/aojiancc2/0c59c43ef4b1458595be2e382163ae68.png)

里边去加入你想加入的配置,比如：
```
VITE_APP_IMG_URL= https://www.tnblog.net/asserts/mp-weixin/smartedu-management-mobile

VITE_APP_BASE_URL = https://www.tnblog.net
VITE_APP_IMG_BASE_URL = https://www.tnblog.net/asserts

## 静态图片引用的配置
VITE_APP_IMG_STATIC_URL = "/static"

VITE_APP_USER_NAME = 620126199008620001
VITE_APP_PASSWORD = 620001
```

#### 然后在package.json里边去添加好对应命令与使用的配置文件的关联
相当于就是某种环境使用什么配置文件的关系

比如开发环境就使用`.env.mp-weixin-dev`里边的配置
![](https://img.tnblog.net/arcimg/aojiancc2/51ade18fa67d453abd667852ff63d2a6.png)

正式环境就使用`.env.mp-weixin-prod`里边的配置
![](https://img.tnblog.net/arcimg/aojiancc2/d01dd037f0994ef3ab4d243d1101f0d4.png)

#### 在src下面创建一个common文件夹和两个文件
![](https://img.tnblog.net/arcimg/aojiancc2/21e9ae27c42f41c5a2b3484a97c8b5bb.png)

**config.ts用来关联配置**
```
const config = {
    env_code: import.meta.env.VITE_APP_ENV_CODE,
    title: '水厂系统', //小程序标题 
    baseUrl: import.meta.env.VITE_APP_BASE_URL,
    imgUrl: import.meta.env.VITE_APP_IMG_URL,
    imgBaseUrl: import.meta.env.VITE_APP_IMG_BASE_URL,
    imgStaticUrl: import.meta.env.VITE_APP_IMG_STATIC_URL,
    tokenUrl: "/connect/token",
    defaultRequest: {
      client_id: "306069",
      client_secret: "talanyvrOkQdtoet",
      grant_type: "wxappxeltjsgrant",
      user_name: import.meta.env.VITE_APP_USER_NAME,
      password: import.meta.env.VITE_APP_PASSWORD,
      tenant_id: 32 
    }
  }
  
  export default config;
```

**utils用来封装常用的方法在里边**
```
import config from '@/common/config.ts'

/**
 * 根据传入的图片名称和类型返回背景图片样式
 * @param imgName 图片路径/名称
 * @param type 类型:0-菜单图标 1-根目录图片
 * @returns 
 */
export function bgImage(imgName: string, type: number = 0) {

  console.log(config.imgBaseUrl)

  let imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/teacher-icon/${imgName}.png)`
  if (type === 1)
    imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/${imgName}.png)`
  return {
    backgroundImage: imgUrl
  }
}


/**
 * 根据传入的图片名称返回背景图片，从静态资源里边加载
 * @param imgName 图片名称
 * @returns 
 */
export function bgStaticImage(imgName: string) {
  let imgUrl = `url('${config.imgStaticUrl}/fun_menu_imgs/${imgName}.png')`
  return {
    backgroundImage: imgUrl

  }
}

export function changeNumToHan(num: number) {
    var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
    var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']
    // 可继续追加更高位转换值
    if (!num || isNaN(num)) {
      return '零'
    }
    var english = num.toString().split('')
    var result = ''
    for (var i = 0; i < english.length; i++) {
      var des_i = english.length - 1 - i // 倒序排列设值
      result = arr2[i] + result
      var arr1_index: number = Number(english[des_i])
      result = arr1[arr1_index] + result
    }
    // 将【零千、零百】换成【零】 【十零】换成【十】
    result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
    // 合并中间多个零为一个零
    result = result.replace(/零+/g, '零')
    // 将【零亿】换成【亿】【零万】换成【万】
    result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
    // 将【亿万】换成【亿】
    result = result.replace(/亿万/g, '亿')
    // 移除末尾的零
    result = result.replace(/零+$/, '')
    // 将【零一十】换成【零十】
    // result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
    // 将【一十】换成【十】
    result = result.replace(/^一十/g, '十')
    return result
  }
```

**注入这里直接引入ts正常情况下会报错：**
启用allowImportingTsExtensions时，导入路径只能以“.ts”扩展名结尾。

要想可以直接导入ts文件需要在`tsconfig.json`里边加入配置：
![](https://img.tnblog.net/arcimg/aojiancc2/ee092a298bcf4e7086ffd344ff17d197.png)

```
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    /*
     注意下面这三个配置，为了让.ts文件可以直接引入。
     可以考虑这个里边的相关配置讲解：https://juejin.cn/post/7259715842873655333
    */
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true,
    "declaration": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
```

但是加入配置后可能要注意一下其他问题，可以考虑一下这篇文章里边的讲解：https://juejin.cn/post/7259715842873655333

#### 然后就可以使用封装的常用方法了
比如使用那个加载背景图图片的方法,当然里边也使用了环境变量的：
```
<template>
  <view class="box mt-10">
    <view class="box-title">班级管理</view>
    <view class="box-body">
      <view class="menu-list">
        <view class="menu-item" @tap="pageJump('/pages/student/stu-growing-roll')">
          <view class="menu-item-icon" :style="bgStaticImage(`stu-growing-roll`)" />
          <view class="menu-item-text">学生成长圈</view>
        </view>
        <view class="menu-item" @tap="pageJump('/pages/growing-statistics/class-growing-statistics')">
          <view class="menu-item-icon" :style="bgImage(`class-growing-record`)" />
          <view class="menu-item-text">班级成长记录</view>
        </view>
        <view class="menu-item" @tap="unPublish">
          <view class="menu-item-icon" :style="bgImage(`sys-attendance`)" />
          <view class="menu-item-text">系统考勤</view>
        </view>
    </view>
  </view>

</template>
<script lang="ts" setup>

import { bgImage,bgStaticImage } from "@/common/utils.ts"

const pageJump = (page: string) => {
  uni.navigateTo({
    url: page,
  });
};

const unPublish = () => {
  uni.showToast({
    title: "暂未开放",
    icon: "none",
  });
};


</script>
<style lang="scss" scoped>

</style>
```

### 安装uni-app的扩展组件
可以按需引入，但是感觉还是直接一次性引入用起来方便一点，其实也不是很大。

官方的文档：https://zh.uniapp.dcloud.io/component/uniui/quickstart.html

#### 安装依赖
```
npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui
```

#### 配置easycom
打开项目根目录下的 `pages.json` 并添加 `easycom` 节点：
```
// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}
```


### 封装一些通用的常用样式。修改所有页面的背景色
在App.vue里边加入下面的代码即可
```
<style lang="scss">

// 全局样式，修改所有页面的背景色
page {
  background-color: #f4f6f9;
  font-family: 'PingFang SC-Regular';
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
    .mt#{$i} {
        margin-top: #{$i}rpx !important;
    }
    .mr#{$i} {
        margin-right: #{$i}rpx !important;
    }
    .mb#{$i} {
        margin-bottom: #{$i}rpx !important;
    }
    .ml#{$i} {
        margin-left: #{$i}rpx !important;
    }
    .pt#{$i} {
        padding-top: #{$i}rpx !important;
    }
    .pr#{$i} {
        padding-right: #{$i}rpx !important;
    }
    .pb#{$i} {
        padding-bottom: #{$i}rpx !important;
    }
    .pl#{$i} {
        padding-left: #{$i}rpx !important;
    }
}
/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
    .font#{$i} {
        font-size: #{$i}rpx !important;
    }
}

</style>
```

使用就非常简单这样就行，所有页面都可以使用封装的全局样式了
```
  <view class="mt20">
```


### 打包，发布

#### 使用命令打包
```
npm run build:mp-weixin
```

#### 导入微信小程序开发工具后发布

怎么导入微信小程序开发工具就和开发的时候一样了，相当于开发一套，build打包好的的一套，build打包好的用于发布代码大小要小很多。

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

通过vue-cli命令行创建uni-app项目。调试微信小程序，vscode 开发 uni-app，微信小程序基础开发模板，基础架子搭建。vue3读取环境变量配置，编译配置

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}