现在位置: 首页 / Vue.js / 正文

Vue 3 项目打包与部署指南（二）

  • admin
  • Vue.js
  • 10小时前
  • 3热度
  • 0评论

在开发 Vue 3 应用的过程中，最终的目标是将其部署到生产环境中。本文将详细介绍如何使用 npm run build 命令打包 Vue 3 项目，并解决打包后可能出现的问题。此外，我们还将探讨如何使用 npm create 和 vue ui 命令创建 Vue 3 项目，以及项目的基本结构和核心文件解析。

打包 Vue 3 项目

当你的 Vue 3 应用开发完毕，准备部署到生产环境时，需要进行打包操作。打包命令非常简单：

npm run build

执行上述命令后，Vue 项目会生成一个 dist 目录，该目录包含 index.html 文件和 static 目录。static 目录中包含了所有的静态文件，如 JavaScript、CSS 和图片（如果有的话）。

解决打包后页面空白问题

有时候，直接双击 dist/index.html 文件在浏览器中打开时，页面可能会显示为空白。这是因为 index.html 文件中的 CSS 和 JavaScript 文件路径是绝对路径。我们需要将其修改为相对路径。

打开 dist/index.html 文件，找到类似以下的代码：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

将这些路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

这样，直接双击 dist/index.html 文件就可以在浏览器中正常显示应用了。

创建 Vue 3 项目

使用 npm create 命令

Vue 3 项目可以通过 npm create 命令快速创建。这个命令通常结合 Vite（Vue 官方推荐的构建工具）来使用。Vite 可以显著提升开发体验，尤其是在大型项目中。

创建 Vue 3 项目的命令格式如下：

npm create vite@latest <project-name> --template vue

参数说明：

  • npm create：用于执行项目模板的命令，它会创建一个新的项目，并从给定的模板中初始化。
  • vite@latest：Vite 是创建 Vue 3 项目的工具，@latest 指定使用最新版的 Vite，确保你创建的项目是基于最新版本的 Vite。
  • <project-name>：新创建项目的文件夹名称。命令会创建一个文件夹，并将模板代码放入其中。
  • --template vue：指定要使用的模板类型。Vite 支持多种模板，vue 是专门为 Vue 3 提供的模板。

例如，创建一个名为 runoob-vue3-app 的项目：

npm create vite@latest runoob-vue3-app --template vue

执行命令后，系统会提示你输入项目名并选择框架。选择 Vue 并继续：

> Project name: … runoob-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

选择 Vue 后，会出现选项变体界面，可以选择 JavaScript 快速开始：

> Project name: … runoob-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/runoob/runoob-test/runoob-vue3-app...

Done. Now run:

  cd runoob-vue3-app
  npm install
  npm run dev

安装完成后，进入项目目录并启动应用：

cd runoob-vue3-app
npm install
npm run dev

打开浏览器访问 http://localhost:5173/，即可看到应用界面。

使用 vue ui 命令

除了命令行创建项目，Vue 还提供了一个图形化的项目管理工具 vue ui。运行以下命令启动图形化界面：

vue ui

启动后，浏览器会自动打开一个项目管理界面。你可以在这个界面上创建新的项目，选择路径，配置项目等。

项目结构解析

一个典型的 Vue 3 项目包含多个文件和文件夹，每个部分都有其特定的作用。以下是项目的基本结构：

my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── assets/         # 静态资源（如图片、字体等）
│   ├── components/     # 可复用的 Vue 组件
│   ├── views/          # 页面级组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 项目入口文件
│   ├── router.js       # 路由配置
│   ├── store.js        # Vuex 状态管理配置
│   └── ...             # 其他配置和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

核心文件解析

public/index.html

public/index.html 是 Vue 应用的 HTML 模板文件。Vue 会将应用挂载到 <div id="app"></div> 中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vue 3 App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

src/main.js

src/main.js 是 Vue 应用的入口文件。它负责创建 Vue 应用实例，并将根组件（通常是 App.vue）挂载到 index.html 中的 div#app 中。

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue

src/App.vue 是 Vue 应用的根组件。它通常包含应用的主要布局和路由视图。


<template>
  <div id="app">

<h1>Hello, Vue 3!</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

src/components/

src/components/ 文件夹包含可复用的 Vue 组件。例如，HelloWorld.vue：


<template>

<div>

<h2>Hello, World!</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

src/views/

src/views/ 文件夹包含页面级组件，通常与路由配置一起使用。例如，Home.vue：


<template>

<div>

<h2>Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

src/router.js

src/router.js 是 Vue Router 的配置文件，用于定义路由。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

src/store.js

src/store.js 是 Vuex 状态管理的配置文件（如果使用 Vuex）。

import { createStore } from 'vuex';

export default createStore({
  state: {
    message: 'Hello, Vuex!',
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    },
  },
});

package.json

package.json 是项目的配置文件，包含项目的元数据、依赖和脚本。

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发服务器
    "build": "vue-cli-service build", // 构建生产环境代码
    "lint": "vue-cli-service lint" // 代码格式化
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  }
}

Vue 组件的基本结构

Vue 组件是 Vue 应用的核心构建块。一个组件通常包含以下部分：

单文件组件（.vue 文件）

一个 .vue 文件包含三个部分：<template>、<script> 和 <style>。


<template>

<div>

<h2>{{ message }}</h2>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新！';
    },
  },
};
</script>

<style scoped>
h2 {
  color: green;

}
</style>

模板（<template>）

  • 使用 HTML 和 Vue 模板语法定义组件的 UI。
  • 支持插值（{{ }}）、指令（如 v-if、v-for）和事件绑定（如 @click）。

脚本（<script>）

  • 定义组件的逻辑，包括数据、方法、生命周期钩子等。
  • 使用 export default 导出组件选项。

样式（<style>）

  • 定义组件的样式。
  • 使用 scoped 属性可以将样式限制在当前组件内。

Vue 项目的运行流程

  1. 启动开发服务器：

    运行 npm run serve 或 yarn serve，启动开发服务器。

    npm run serve

    打开浏览器访问 http://localhost:8080，查看应用。

  2. 构建生产环境代码：

    运行 npm run build 或 yarn build，生成优化后的生产环境代码。

    npm run build

  3. 代码格式化：

    运行 npm run lint 或 yarn lint，格式化代码。

    npm run lint

通过本文，你应该能够顺利地创建、打包和部署 Vue 3 项目。希望这些内容对你有所帮助，祝你在 Vue 3 开发之旅中一切顺利！