【前端】vue3：编译步骤

郭老二2026-08-01 23:02

1、简介

以 Vite Vue3 项目为例，在Windows下编译vue3项目，将生成的dist目录拷贝到Ubuntu22.04+arm64上运行

Vue3 本身、vue-router、vuex、axios、element-plus、ant-design-vue 这类纯 JS 依赖纯 JavaScript 代码，跨 CPU、跨系统全都兼容。

注意：如果包含原生二进制插件，比如：node-gyp 编译的 C/C++ 模块，将会不兼容。

2、安装、测试

1）安装node、npm、yarn

node、npm下载地址：

复制代码

https://nodejs.org/

安装 yarn

复制代码

npm install yarn -g

2）查看版本

复制代码

node -v
npm -v
yarn -v

3）配置国内源和超时时间：针对网络不佳的情况

复制代码

npm config set registry https://registry.npmmirror.com
npm config set timeout 60000
yarn config set registry https://registry.npmmirror.com
yarn config set network-timeout 60000

4）安装依赖库

复制代码

npm install

或者使用yarn

复制代码

yarn install

如果成功了会提示

bash 复制代码

[4/4] Building fresh packages...
success Saved lockfile.
Done in 364.12s.

5）开发测试

复制代码

npm run dev

或者使用yarn

复制代码

yarn dev

同时会弹出浏览器界面

6）编译打包 dist

复制代码

npm run build

或者使用yarn

复制代码

yarn build

将会在源码目录中生成dist，目录结构如下：

将 dist 拷贝到Ubuntu22.04系统的目录下，比如：/home/laoer/dist

7）在Ubuntu22.04中安装nginx

修改 nginx 配置文件nginx.conf

bash 复制代码

    server{
        listen  8080;

        location / {
            root  /home/laoer/dist;
            index /index.html;
            error_page 404 /index.html;
        }

如果端口号被占用，可以使用下面的命令查看

复制代码

sudo netstat -tunlp | grep 8080

8）访问 Ubuntu22.04 的IP和8080端口，即可