Vue3项目部署到服务器

打包命令

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

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

所以，在我的项目中应该使用的命令是：

arduino 复制代码

 npm run build-only

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

遇到问题

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

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

网页刷新报错

解决方法

把history模式换成hash（不美观）
当后端找不到路径时，默认配置请求路由为index（麻烦）
配置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的配置文件即可。