一.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
对本身组件绑定事件
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下部署相同,但是需要注意路由的配置情况。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: 感恩有你|恭喜 OpenTiny Vue 开源组件库喜迎1000+star!!!
从数据到大模型应用,11 月 25 日,杭州源创会,共享开发小技巧 前言 感恩节前夕,OpenTiny社区的 TinyVue 组件库终于突破1000+star~ 感谢所有支持 OpenTiny 开源社区的朋友们! 对此,参与OpenTiny开源的各位项目成员也…