vue3，Nginx部署情况

一.Vue3项目情况说明

router文件夹下的index.js

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path:'/saoma',
        name:'Saoma',
        // redirect:'/saoma',
        component:() => import('../views/saoma.vue')
    },
    {
        path:'/home',
        name:'home',
        component:() => import('../views/home.vue')
    },
    {
        path:'/',
        name:'home',
        component:() => import('../views/home.vue')
    },
]

var router=createRouter({
    history:createWebHashHistory(),
    routes
})
export default router

vue.config.js

在vue3+vite项目当中默认是没有vue.config.js文件的，因此需要自己在根目录下去新建文件

文件配置如下：

export const publicPath = './';
module.exports = {
    devServer: {
        open: true,
        proxy: {
            "/HsApi": {
                // 凡是以 /HsApi 开头的请求，进行代理
                target: "http://192.168.190.20:8085/",
                changOrigin: true,  //允许跨域
                wx:true,
                pathRewrite:{
                    '^/HsApi':''
                }
            },
                "/HsMinio": {
                    // 凡是以 /HsMinio 开头的请求，进行代理
                    target: "http://192.168.190.20:3000/",
                    changOrigin: true,  //允许跨域
                    wx:true,
                    pathRewrite:{
                        '^/HsMinio':''
                    }
                },
            "/Sequelize": {
                // 凡是以 /Sequelize 开头的请求，进行代理
                target: "http://192.168.190.20:3000/api/",
                changOrigin: true,  //允许跨域
                wx:true,
                pathRewrite:{
                    '^/Sequelize':''
                }
            },
        },
    
    },
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
axios.defaults.baseURL="/api"
const app = createApp(App)
app.use(router)
app.mount('#app')

home.vue

下面展示代码为主要代码

通过fetch方法实现对“http://192.168.190.20:8085/HsMesApi/AddBarCodeModel”的POST请求，在这个方法下会产生一个问题，就是跨域请求问题，关于跨域请求详情参考（https://mp.weixin.qq.com/s/sy3EgXJFnCtcpsDbtn6azg），因此通过在vue.config.js当中配置代理池来进行访问，表面上访问的是“http://localhost:8085/HsApi/HsMesApi/AddBarCodeModel”,但是在实际上在访问到/HsApi时，会将“http://localhost:8085/HsApi/”整体替换成“http://192.168.190.20:8085”，通过这种方法实现跨域请求。

fetch('/HsApi/HsMesApi/AddBarCodeModel', {
    method: 'POST',
    headers:{
      "Content-Type": "application/json",
    },
    body:data
  }).then(res => res.json())
      .then(data => console.log(data))
        .catch(error => console.error(error))

通过引用Element-Plus里面的Autocomplete自动补全输入框，由于官方文档中使用的是TypeScript编写的，这里需要进行Javascript的改写，首先是将获取到的数据存入自身定义的数组当中

const getProdLineDetail = async () =>{
  // console.log(11111111111);
  await fetch('/HsApi/HsMesApi/GetProdLineDetail', {
    method: 'POST',
    headers:{
      "Content-Type": "application/json",
    },
  }).then(res => res.json())
      .then(data => Product.values = JSON.parse(data.data))
        .catch(error => console.error(error))
  // console.log(Product.values[0]);
  for (let i = 0; i < Product.values.length; i++) {
    const element = Product.values[i]
    const restaurant = {value:element.Line, link: element.Describe};
    restaurants.push(restaurant);
  }
}

对本身组件绑定事件

const querySearch = (queryString ,cb) =>{
  getProdLineDetail();
  // 通过延时来解决数据加载问题，这里要先等数据加载完成才能够实现自动补全，不然当你输入部分字符时，是不会跳出补全信息的
  setTimeout(() => {
    const result = queryString ? restaurants.filter(createFilter(queryString)) : restaurants
    cb(result)
  }, 200);
  
}

const createFilter = (queryString) =>{
  return (restaurantsts) => {
    return (restaurantsts.value.indexOf(queryString) !== -1)
  }
}

const handleSelect = (item) =>{
  form.Line = chanxian.value;
  console.log("输入的对象item:", item);
  console.log("输入框的值:", chanxian);
  
}

详细的情况可以参考（https://blog.csdn.net/spring_007_999/article/details/130224122）

然后在终端运行打包

npm run build

在目录下生成dist文件夹

二.Windows下Nginx部署

首先将打包好的dist文件整体放置在nginx目录下的html文件夹中

然后通过纯文本打开conf文件夹下的nginx.conf进行路由配置

主要修改地方有两处

修改根路径的root指向，已经新配置路由。

运行

cmd下运行nginx.exe

然后访问（在启动nginx.exe之前先检查端口使用情况，详细可以参考https://blog.csdn.net/XP1990/article/details/126946906）

三.Linux下Nginx部署

与windows下部署相同，但是需要注意路由的配置情况。