Vue3项目部署到服务器

打包命令

我们知道其实本质上浏览器只会读取html,css,javascript的脚本语言,而无法识别vue,所以在上传之前需要进行打包,也就是把vue转换成纯html文件

先检查package.json文件,找到vite build

所以,在我的项目中应该使用的命令是:

arduino 复制代码
 npm run build-only

而当build运行npm run build的时候是会进行语法检查,导致打包不成功的

遇到问题

开发环境直接部署到服务器上时,共遇到了两个问题:

  1. 第一个是网页刷新报错
  2. 另外一个是无法发送请求

网页刷新报错

解决方法

  1. 把history模式换成hash(不美观)
  2. 当后端找不到路径时,默认配置请求路由为index(麻烦)
  3. 配置nginx:在location下加入:
bash 复制代码
 location / {
        try_files $uri $uri/ /index.html;
    }

404报错

这是因为vue项目为了方便调试(npm run dev)会配置本地代理: 也就是vite.config.json文件中的server:

javascript 复制代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import ViteMonacoPlugin from 'vite-plugin-monaco-editor-esm'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools(), ViteMonacoPlugin({})],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },

  //前端处理跨域问题
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://your.server.address:8081',

        changeOrigin: true,
        rewrite: (path) => path.replace(/\/api/, ''),
      },
    },
   }

})

但部署到服务器上时,是没有本地代理,也就意味着/api不会被转换为target路径,导致报404无法找到的错误。

解决方法:

既然缺少代理,那么我们就可以尝试在服务器中使用代理,比如nginx

配置nginx代理的步骤

bash 复制代码
 location /api/ {
        # 重写规则,去除 /api 前缀
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

注意

当配置不正确的时候,是会报401或者405的错误,这个时候原因不是路由不对,也不是后端接口的问题,而是nginx请求的路径配置不对,检查nginx.conf的配置文件即可。

相关推荐
雪碧聊技术3 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了4 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust