nginx+vite项目打包以及部署的详细过程

更新时间：2023年01月05日 10:59:10 作者：菲吻于雪

我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于nginx+vite项目打包以及部署的相关资料,需要的朋友可以参考下

项目打包及部署到服务器二级路由

例如：我希望将打包的项目部署到 http://localhost:8088/web/ 上

一. 项目配置及打包

项目部署到服务器二级路由需要配置基础路径base，即需要：

1.配置vite.config.ts中的基础路径

2.配置路由的基础路径

方式一通过环境变量配置基础路径

分别在production和development模式下的环境变量中添加基础路径变量，生产环境：.env.production文件，开发环境：.env.development文件

##生产环境
NODE_ENV='production'
VITE_BASE_PATH=/web/

##开发环境
NODE_ENV='development'
VITE_BASE_PATH='/'

vite.config.ts

在配置中添加：
export default ({ mode }: ConfigEnv): UserConfig => {
  // 获取 .env 环境配置文件
  const env = loadEnv(mode, process.cwd());
  return {
    base: env.VITE_BASE_PATH,
    ...
  }
}

router/index.ts

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH),
  routes
})

package.json

"scripts": {
  "dev": "vite serve --mode development",
  "build:prod": "vue-tsc --noEmit && vite build --mode production"
}

打包：

npm run build:prod

方式二通过打包时的指令配置基础路径

不用配置环境变量，vite.config.ts不用配置base属性，只需要在router/index.ts中添加：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

import.meta.env.BASE_URL为vite内置

package.json

"scripts": {
  "dev": "vite serve --mode development",
  "dev:base": "vite serve --mode development --base",
  "build:prod": "vue-tsc --noEmit && vite build --mode production"
  "build:base": "vue-tsc --noEmit && vite build --mode production --base",
}

打包：

npm run build:base --base /web/

二. nginx配置及部署

server {
  listen       8088;
  server_name  localhost;

  location /web {
    #二级路由时需要使用别名alias，不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files，刷新会404
    try_files $uri $uri/ /web/index.html;
  }

  #后台接口
  location /prod-api/ {
    proxy_pass http://172.16.20.30:9905/;
  }
}

Vite基础路径指令配置原理

在vite当中，官方提供了一些内置环境变量，其中就包括BASE_URL，该值默认为/，在项目文件中，必须通过import.meta.env.xxx的方式调用环境变量，此处为import.meta.env.BASE_URL，之后，vite会将import.meta.env.BASE_URL替换为内置的BASE_URL的值，并可以通过指令：--base <path>设置BASE_URL的值

使用npm运行脚本时可以传递参数，在package.json中添加指令：

demo: vite build --mode production

运行npm run demo时等同于vite build --mode production

运行npm run demo -- --base /web/时等同于vite build --mode production --base /web/

但是-- --有两个--，使用起来不太方便，于是改进一下指令：

demo: vite build --mode production --base

运行npm run demo --base /web/时等同于vite build --mode production --base /web/

总结

到此这篇关于nginx+vite项目打包以及部署的文章就介绍到这了,更多相关nginx vite项目打包及部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈vue+vite项目部署会遇到的几个问题

详解elementUI中input框无法输入的问题
这篇文章主要介绍了详解elementUI中input框无法输入的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue3中的defineExpose函数用法深入解析
这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
2025-01-01
vue中进行微博分享的实例讲解
在本篇文章里小编给大家整理的是一篇关于vue中进行微博分享的实例内容，有需要的朋友们可以参考下。
2019-10-10
vue中使用vue-pdf的方法详解
这篇文章主要介绍了vue中使用vue-pdf的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
vue实现图片上传到后台
这篇文章主要为大家详细介绍了vue实现图片上传到后台，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)
遇到一个Vuecli2脚手架卸载不了的问题,查了许多资料说的都比较复杂,所以下面这篇文章主要给大家介绍了关于vue-cli2.x旧版本卸载不掉的问题踩坑的相关资料,文中还附了Vue脚手架安装教程,需要的朋友可以参考下
2022-07-07
vue如何修改el-form-item中的label样式修改问题
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3中defineComponent 的作用详解
这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
elementUI实现级联选择器
这篇文章主要为大家详细介绍了elementUI实现级联选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
如何利用vue3实现一个俄罗斯方块
俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01