一.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 routervue.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下部署相同，但是需要注意路由的配置情况。