使用vite打包并部署vue项目到nginx

2024-11-11 22:51:13

1 使用 Vite 创建 vue3 项目

Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤：

一、安装 Node.js 和 npm

首先，确保计算机上安装了 Node.js 和 npm（Node 包管理器）。具体安装方法这里不再赘述，可以在命令行中运行 node -v 和 npm -v 来检查它们是否已安装以及安装的版本。

二、全局安装 Vite

接下来，需要全局安装 Vite。打开命令行或终端，并运行以下命令：

npm install -g create-vite

或者，如果使用的是 Yarn，可以运行：

yarn global add create-vite

注意：从 Vite 2.x 版本开始，官方推荐使用 npm init vite@latest 命令来创建新项目，而不是全局安装 create-vite。因此，下面的步骤将基于这种新方法。

三、 创建 Vue 3 项目

现在，可以使用 npm init 命令来创建一个新的 Vite 项目，并指定使用 Vue 作为框架：

npm init vite@latest my-vue3-project -- --template vue

将 my-vue3-project 替换为想要的项目名称。这个命令会创建一个名为 my-vue3-project 的新文件夹，并在其中初始化一个 Vite + Vue 3 的项目。

四、进入项目目录并安装依赖

创建项目后，进入项目目录并安装依赖项：

cd my-vue3-project
npm install

或者，如果使用的是 Yarn：

cd my-vue3-project
yarn

五、运行项目

安装完依赖项后，可以运行项目：

npm run dev

或者，如果使用的是 Yarn：

yarn dev

Vite 会启动一个开发服务器，并在的默认浏览器中打开一个新的标签页，显示的 Vue 3 应用。应该会在浏览器中看到一个欢迎页面，表明项目已成功创建并正在运行。

2 编译并打包基础程序

在终端中运行以下命令来打包你的项目：

npm run build

将打包后的 dist 文件夹拷贝到 nginx 目录下的 html 文件夹中。

注意此时如果直接访问 http://localhost/dist/index.html ，则会提示找不到 index.js 以及 index.css 资源文件。这是由于 Vite 在打包时生成的资源路径是相对于根目录（/）的，而当你将 dist 文件夹放入 Nginx 的 html 目录下后，这些资源的路径就不再正确了。Nginx 默认会将 html 目录作为网站的根目录，所以当访问 http://localhost/dist/index.html 时，浏览器会尝试从网站的根目录（即 Nginx 的 html 目录）下加载 /assets/index.js，但实际上这个文件位于 html/dist/assets/ 目录下。

为了解决这个问题，可以修改 Nginx 的配置文件，将 html/dist 目录设置为网站的根目录。这样，你访问 http://localhost/index.html 时，浏览器就会从正确的位置加载资源。

修改 Nginx 配置文件的示例：

server {
    listen 80;
    server_name localhost;

    root ./html/dist;  # 修改为指向 dist 目录
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

然后重启 Nginx 使配置生效。

最后访问地址：http://localhost/

3 增加路由

Vue Router 是 Vue.js 的官方路由管理器，它允许开发者通过不同的 URL 访问不同的页面（组件）。在 Vue 3 项目中，Vue Router 的安装与配置过程相对简单且直观。

一、安装 Vue Router

* 在项目根目录下，运行 `npm install vue-router@4` 命令来安装 Vue Router 的最新版本（针对 Vue 3 的版本是 4.x）。

二、配置 Vue Router

  1. 创建路由配置文件：

    • 在项目的 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件。这个文件将用于定义和配置路由。

  2. 定义路由：

    • 在 src/router/index.js 文件中，使用 Vue Router 提供的 API 来定义路由规则。这通常包括导入组件、定义路由对象数组，并创建路由器实例。例如：
    import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

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

export default router;

  3. 创建视图组件：

    • 在 src/views 目录下创建与路由对应的视图组件。例如，创建 Home.vue 和 About.vue 组件，并在其中编写模板和脚本。

  4. 注册路由：

    • 在 src/main.js 文件中，导入并注册 Vue Router。这通常是通过创建 Vue 应用实例，并使用 .use(router) 方法来完成的。例如：
    import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

  5. 配置 App 组件：

    • 在 App.vue 文件中，添加 <router-view> 组件。这个组件是 Vue Router 提供的特殊组件，它会根据当前的路由显示不同的视图内容。同时，你还可以使用 <router-link> 组件来创建导航链接。例如：
    <template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

<style>
/* 样式代码 */
</style>

4 编译并打包带路由的程序

在终端中运行以下命令来打包你的项目：

npm run build

此时如果在浏览器地址栏输入 http://localhost/about，则提示404 Not Found。

这是因为 Nginx 没有正确地配置来处理前端路由。Vue Router 在前端使用 HTML5 History 模式时（这是默认模式，除非显式地设置为 hash 模式），它会尝试使用浏览器的历史记录 API 来模拟传统的服务器端路由。这意味着当用户在浏览器中直接访问一个像 /about 这样的路由时，实际上并没有一个对应的服务器端文件（如 about.html）来响应这个请求。

为了解决这个问题，需要确保 Nginx 配置了适当的重写规则，以便对所有前端路由请求返回同一个 index.html 文件。这样，Vue Router 就可以接管路由并在客户端正确地渲染对应的组件。

以下是一个 Nginx 配置的示例：

修改 Nginx 配置文件的示例：

server {
    listen 80;
    server_name localhost;

    root ./html/dist;  # 修改为指向 dist 目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

然后重启 Nginx 使配置生效。

最后访问地址：http://localhost/about

5 处理非import形式引入的资源文件

在 Vue 3 项目中，如果通过父子组件传参的方式传递图片地址，并且这些图片地址指向的是外部资源或者是在 public 目录下的资源，而不是通过 import 语句引入的，那么 Vite 在打包时确实不会自动将这些图片包含到 assets 文件夹中。这是因为 Vite 主要处理的是通过 import 或 require 引入的模块和资源。

对于这种情况，有几个解决方案：

  1. 将图片放在 public 目录中：
    如果图片资源不需要经过 Webpack/Vite 的处理（例如，它们不是模块化的或不需要被优化），则可以简单地将它们放在 public 目录中。然后，可以通过相对路径或根路径来引用这些图片。例如，如果图片在 public/images/logo.png，则可以在组件中通过 /images/logo.png 来引用它（注意，这里使用的是根路径，因为 public 目录的内容在构建时会被复制到输出目录的根目录下）。

  2. 使用 import 语句引入图片：
    如果希望图片被包含在最终的打包文件中，并且能够通过路径别名或其他 Webpack/Vite 提供的特性来引用它们，则应该使用 import 语句来引入图片。例如：

    // 在组件中
import logo from '@/assets/logo.png';  // 假设你有一个别名 @ 指向 src 目录

export default {
  data() {
    return {
      logoUrl: logo
    };
  }
};

    然后，你可以将这个 logoUrl 传递给子组件，并在模板中使用它。

  3. 动态导入图片（如果适用）：
    如果图片地址是在运行时确定的（例如，从 API 获取），并且无法预先知道所有的图片地址，则可能需要使用动态导入的方法。但是，请注意，这种方法通常用于模块或代码分割，而不是直接用于图片资源。对于图片，可能仍然需要将它们放在 public 目录中或通过其他方式确保它们可被访问。

  4. 配置 Vite 以包含这些图片：
    如果确实需要 Vite 在打包时包含这些图片，并且有一个明确的图片列表或模式，则需要修改你的 Vite 配置来包含这些资源。然而，这通常不是推荐的做法，因为 Vite 的设计初衷是处理 JavaScript 模块和相关的资源。对于静态资源，通常最好将它们放在 public 目录中。

  5. 使用 CDN：
    如果图片资源非常大或经常更新，考虑将它们托管在 CDN 上，并从 CDN 加载它们。这样可以减轻你的服务器的负担，并且用户可以从离他们更近的位置加载资源。

在大多数情况下，将图片放在 public 目录中并通过相对或根路径引用它们是最简单和最直接的方法。如果需要更复杂的资源管理或优化，则需要考虑使用其他工具或插件来扩展 Vite 的功能。

上一篇：【Leecode】Leecode刷题之路第46天之全排列