vue3微信公众号商城项目实战系列（12）项目发布到服务器上

标签：12 微信 APP js 编译 env vue3 config VITE

本篇介绍如何将vue3项目打包发布到服务器上，然后在微信公众号上打开。

vue3发布之前需要对项目进行编译，编译时会在项目根目录下创建 dist 文件夹，编译后的文件会存放在这里。

在编译之前，我们在public目录下建一个 config.js 的文件，里面放如下的代码：

const config = {
    baseUrl: "http://api.xxx.com/api", //修改为你的服务器接口地址
}

1. 作用

方便运维同事将编译后的代码部署到web服务器之前可以根据情况修改后端接口API 地址。即使部署完成后

，后端接口API地址如果有变动（后端写API的同事可能也在不定期发布新版本），也很容易通过修改这个文件解决

，而不需要找前端同事重新编译打包一次。

2. 为什么放置在这个目录呢？

因为其他目录的文件编译后文件名后面会加一个随机字符串（见下图），而public目录下的文件名会保持不变

，运维可以很方便的找到这个文件并修改。

注：public 目录下的文件编译后会自动放到根目录（public目录不存在了），这是 public 和 src/assets 目录不同的地方。

3. 如何使用这个配置呢？

这需要代码中能区分开发环境和服务器环境，开发环境会自动读取 vite.config.js 配置文件中 "server" 属性的配置信息

，这里定义了后端接口API地址（一般仅供开发使用），如果vue3项目编译完成部署到服务器环境后

能自动读取 config.js 中的配置信息问题就解决了。这里我们使用vue3的环境配置文件来解决。

第1步：

在 vue3 根目录下新建 ".env.development" 和 ".env.production" 文件，分别对应开发环境配置和生产环境配置

，这里的文件名除了保持 ".env." 的前缀外，后面可以任意取名，但需要到package.json中的"scripts"属性下去增加配置以便和新名称对应

，development 和 production 是预设的名称，不需要额外设置，直接使用就可以了，如下：

第2步：

在这个2个文件中分别加入如下的代码

.env.development

VITE_APP_ENV = 'development'

VITE_APP_BASE_URL = '/dev-api'

.env.production

VITE_APP_ENV = 'production'

VITE_APP_BASE_URL = '/prod-api'

注意：按VITE的约定变量名称必须以 "VITE_" 开头

，如果要修改需要到 vite.config.js文件的 defineConfig() 函数中加上envPrefix : “XXX_”的配置，这里遵守约定去使用就可以了。

使用时用 import.meta.env.VITE_APP_ENV 就可以取到相应的值了，用npm run dev命令在本机运行时会读取开发环境.env.development的值

，当build后，会使用正式环境.env.production中的值。

第3步：

修改 request.js 中 baseURL 的取值方式，如下：

//配置默认的Content-Type格式
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = import.meta.env.VITE_APP_ENV === "development" ? import.meta.env.VITE_APP_BASE_URL : config.baseUrl;
//创建axios实例
const service = axios.create({   
    timeout: 60*1000, //请求超时时间60秒
    baseURL: '/dev-api',
})

之前的baseURL是写死的，现在将其从axios.create() 方法中提取出来进行全局配置，判断当前环境变量 import.meta.env.VITE_APP_ENV 是否是开发环境

，如果是读取 import.meta.env.VITE_APP_BASE_URL的值为"/dev-api"，如果不是，就从外部的 config.js 中读取 baseUrl 属性值。

第4步(最后一步)：

在 index.html 文件中增加对 config.js的 script 引用，以便 request.js 中可以使用"config.baseUrl"时可以正常取值，如下（见12行）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8">
 5     <link rel="icon" href="/favicon.ico">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Vite App</title>
 8   </head>
 9   <body>
10     <div id="app"></div>
11     <script type="module" src="/src/main.js"></script>
12     <script type="text/javascript" src="/config.js"></script>
13   </body>
14 </html>

至此，整个开发编译发布的修改就完成了。

--------------------------------------------------------------------------------------------------------

编译前的文件：