0


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

1 使用 Vite 创建 vue3 项目

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

一、安装 Node.js 和 npm

首先,确保计算机上安装了 Node.js 和 npm(Node 包管理器)。具体安装方法这里不再赘述,可以在命令行中运行

node -v

npm -v

来检查它们是否已安装以及安装的版本。

二、全局安装 Vite

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

npminstall -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
npminstall

或者,如果使用的是 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});exportdefault router;
  3. 创建视图组件:- 在 src/views 目录下创建与路由对应的视图组件。例如,创建 Home.vueAbout.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><divid="app"><nav><router-linkto="/">Home</router-link><router-linkto="/about">About</router-link></nav><router-view></router-view></div></template><script>exportdefault{ 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 目录exportdefault{data(){return{ logoUrl: logo };}};然后,你可以将这个 logoUrl 传递给子组件,并在模板中使用它。
  3. 动态导入图片(如果适用): 如果图片地址是在运行时确定的(例如,从 API 获取),并且无法预先知道所有的图片地址,则可能需要使用动态导入的方法。但是,请注意,这种方法通常用于模块或代码分割,而不是直接用于图片资源。对于图片,可能仍然需要将它们放在 public 目录中或通过其他方式确保它们可被访问。
  4. 配置 Vite 以包含这些图片: 如果确实需要 Vite 在打包时包含这些图片,并且有一个明确的图片列表或模式,则需要修改你的 Vite 配置来包含这些资源。然而,这通常不是推荐的做法,因为 Vite 的设计初衷是处理 JavaScript 模块和相关的资源。对于静态资源,通常最好将它们放在 public 目录中。
  5. 使用 CDN: 如果图片资源非常大或经常更新,考虑将它们托管在 CDN 上,并从 CDN 加载它们。这样可以减轻你的服务器的负担,并且用户可以从离他们更近的位置加载资源。

在大多数情况下,将图片放在

public

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

标签: vue.js nginx 前端

本文转载自: https://blog.csdn.net/h8062651/article/details/143628609
版权归原作者 breakthrough_01 所有, 如有侵权,请联系我们删除。

“使用vite打包并部署vue项目到nginx”的评论:

还没有评论