81- vue3案例 - 部署

原文链接: Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）_centos7部署vue项目-CSDN博客

vue项目配置:

1. 编辑vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  base: './',  // 修改路径为./
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 80, // vue项目的端口
    host: '0.0.0.0', 
    hmr: true,
    open: true,
    proxy: {
      // /goods: 跨域访问  后端路径的中间分部
      '/goods': { 
        target: 'http://192.168.37.100',  // 后端ip
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/goods/, '') 
      }
    }
  }
})

2. 设置package.json

{
  "name": "vuew_demo_api",
  ..
  "scripts": {
    "dev": "vite --host=0.0.0.0", // 开放ip
    "build": "vite build",
    ...
  },
...
}

3. 配置request.js

const baseURL = 'http://192.168.37.100' // 后端接口

const instance = axios.create({
  //1. 基础地址,超时时间
  baseURL,
  tomeout: 10000
})

3. 封装的api

import request from '@/utils/request'

// 获取地址信息
export const GetAddress = (state) =>
  request.get(`/goods/address/?state=${state}`)

4. 打包

pnpm run  build

5. centos 部署系统

# 1. 新建goods文件夹
cd /usr/local/nginx/html
mkdir goods

# 2. 将打包后的 dist 文件拖进去

6. 配置nginx.conf文件

# 1. 进入文件夹
cd /usr/local/nginx/conf
vi nginx.conf


# 2. 编辑

 server {
        listen       80;
        server_name  192.168.37.153; # 虚拟机的ip

        location / {
             root   /usr/local/nginx/html;
	    	 #try_files $uri $uri/ /cloud/dist/index.html;
             index  index.html index.htm;  
			
       }

       location /index{
            alias /usr/local/nginx/html/goods/dist; # 静态文件的地址
            try_files $uri $uri/ /dist/index.html;  # 文件
	   	  index  index.html index.htm;	
		     

           }    


        ...

7. 重新加载配置文件

cd /usr/local/nginx/sbin
 
./nginx -s reload

8. 浏览器输入ip+/index/ 访问，出现页面表示前端部署成功。