配置项目（一）——vue.config.js

配置项目——vue.config.js

第一步：查看接口文档的字段和端口号

第二步：在vue.config.js中，proxy里面定义

自定义名字/devStatusApi、target地址、pathRewrite同名字

第三步：在文件src/api/serviceConfig.js中，配置和导出devStatusApi

let devStatusApi, if (process.env.NODE_ENV === 'development'){ 
    devStatusApi = '/devStatusApi', }else{ 
    devStatusApi = '/192.168.105.66:9091', } export { 
   devStatusApi } 

第四步：新建文件src/api/operationalData/devStatusApi.js文件，配置接口字段 /devopes/v1/Computer

import request from 'service'; import { 
    devStatusApi } from 'serviceConfig'; export default { 
    // 获取计算机信息 getAllComputer(props) { 
    return request.get(`${ 
     devStatusApi}/devopes/v1/Computer`) }, // 启动计算机 startComputer(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/StartComputer/${ 
     props.id}`) }, // 关闭计算机 ShutdownComputer(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/ShutdownComputer/${ 
     props.id}`) }, // 重启计算机 RebootComputer(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/RebootComputer/${ 
     props.id}`) }, // 启动软件 StartSoftware(props) { 
    // return request.put(`${devStatusApi}/devopes/v1/StartSoftware/${props.id}/${props.ids}`) return request.put(`${ 
     devStatusApi}/devopes/v1/StartSoftware/${ 
     props.id}`, props.data) }, // 关闭软件 CloseSoftware(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/CloseSoftware/${ 
     props.id}/${ 
     props.ids}`, props.data) }, // 重启软件 RestartSoftware(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/RestartSoftware/${ 
     props.id}/${ 
     props.ids}`, props.data) }, // 部署软件 deploymentSoft(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/DeploySoftware/${ 
     props.id}`, props.data) }, // deploymentSoft(id, props) { 
    // console.log(id) // console.log(id.id) // return request.put(`${devStatusApi}/devopes/v1/DeploySoftware/${id.id}`, props) // } } 

附：接口文档

接口-获取计算机信息

url devops/v1/computer 方法 GET 输入 无 输出 所有计算机信息 { 
    code : 200, msg : "获取成功", data : [ { 
    id : , name : "电脑", user : "administrator", description : "XXX电脑", ip : "127.0.0.1", osType : "Windows", osVer : "Win7", totalMemory : , /*单位MB*/ cpuUsage : 0.95, memoryUsage :  /*单位MB*/ }, { 
    id : , name : "电脑", user : "administrator", description : "XXX电脑", ip : "127.0.0.1", osType : "MAC OS", osVer : "mac os 11", totalMemory : , /*单位MB*/ cpuUsage : 0.95, memoryUsage :  /*单位MB*/ } ] } 

接口-启动计算机

url devops/v1/startcomputer/:computerId 方法 PUT 输入 计算机id 输出 结果 { 
    code : 200, msg : "启动成功", data : { 
    } } 

接口-启动软件

url devopes/v1/StartSoftware/:computerId 方法 PUT 输入 计算机id { 
    name:"XX软件", launcharPath:"XSIMd.exe", // 启动参路径 launcharParam: "-config config/AFSeatintegrationPlugin.config -appname '席位集成后台'", // 启动参数 processName:"XSIMd.exe" // 进程名称 } 输出 结果 { 
    code : 200, msg : "启动成功", data : { 
    } } 

接口-关闭软件

url devopes/v1/CloseSoftware/:computerId/:softwareId 方法 PUT 输入 计算机id { 
    name:"XX软件", launcharPath:"XSIMd.exe", launcharParam: "-config config/AFSeatintegrationPlugin.config -appname '席位集成后台'", processName:"XSIMd.exe" } 输出 结果 { 
    code : 200, msg : "关闭成功", data : { 
    } } 

1.0、get请求方式

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
   getAllComputer} = devStatusApi 

第六步：在methods中定义接口使用方法getAllComputer（）

getAllComputerInfo(){ 
    getAllComputer().then((res)=>{ 
    console.log(res) }) } 

第七步：在created里进行调用

created(){ 
    this.getAllComputerInfo() } 

1.1.1、put请求方式-1个参数id

第一步：查看接口文档的字段和端口号
第二步：在vue.config.js中，proxy里面定义
自定义名字/devStatusApi、target地址、pathRewrite同名字
第三步：在serviceConfig.js配置和导出devStatusApi

以上相同
第四步：新建devStatusApi.js文件配置接口字段 /devopes/v1/StartComputer/😒{props.id}
第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
   startComputer,ShutdownComputer} = devStatusApi 

第六步：在methods中定义接口使用方法onComputer（）

 // // 启动计算机 // onComputer() { 
    // startComputer({ id: "16" }).then((res) => { 
    // console.log(res); // }); // }, 

第六步：在methods中定义接口使用方法

<div @click="of(scope.row.id)"></div> 

方法

// 关机 off(scope){ 
    this.offComputer(scope) } // 关闭计算机 offComputer(scope) { 
    ShutdownComputer({ 
    id: scope }).then((res) => { 
    console.log(res); }); }, 

第七步：在created里进行调用

 this.offComputer(scope) 

1.1.2、put请求方式-2个参数id

 // 关闭软件 CloseSoftware(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/CloseSoftware/${ 
     props.id}/${ 
     props.ids}`, props.data) }, 

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
   CloseSoftware} = devStatusApi 

第六步：在methods中定义接口使用方法offSoftware（）

 // 关闭软件 offSoftware() { 
    CloseSoftware({ 
    id: "28", ids: "281" }).then((res) => { 
    console.log(res); }); }, 

第七步：在created里进行调用

this.offSoftware() 

1.1.3、put请求方式-1个参数id和一个对象data

 // 部署软件 deploymentSoft(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/DeploySoftware/${ 
     props.id}`, props.data) }, // deploymentSoft(id, props) { 
    // console.log(id) // console.log(id.id) // return request.put(`${devStatusApi}/devopes/v1/DeploySoftware/${id.id}`, props) // } 

方式1-对话框中使用

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
    deploymentSoft } = devStatusApi 

第六步：在methods中定义接口使用方法handSoft（）

handSoft(){ 
    const seatRunRes = deploymentSoft({ 
    id:this.id, data:this.multipleSelection, }); // const seatRunRes = await deloymentSoft({id:this.id,data:[{name:"华夏",tag:123},{name:"中华",tag:456}]}); // const seatRunRes = await deloymentSoft({id:123},[{name:"华夏",tag:123},{name:"中华",tag:456}]); console.log(seatRunRes); this.dialogVisible = false; return seatRunRes; } 

方式2-点击按钮使用

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
    StartSoftware } = devStatusApi 

第六步：在methods中定义接口使用方法

<div @click="open(scope.row)"></div> 

方法

// 启动 open(scope){ 
    // console.log(scope,"") // StartSoftware({id:scope.ids}).then((res)=>{ 
    // console.log(res) // }); this.onSoft(scope); }, //启动软件 onSoft(scope){ 
    const seatRunRes = StartSoftware({ 
    id:scope.ids, data:{ 
    // name:"XXX软件", // launcherPath:"XSIMd.exe", // launcherParam:"-name '名字'", // processName:"XSI.exe" name:scope.showName, launcherPath:scope.launcherPath, launcherParam:scope.launcherParam, processName:scope.processName, }, }); return seatRunRes } // 使用数据 this.seatRunData = [...seatRunRes.obj]; 

1.1.4、put请求方式-2个参数id和一个对象data

 // 重启软件 RestartSoftware(props) { 
    return request.put(`${ 
     devStatusApi}/devopes/v1/RestartSoftware/${ 
     props.id}/${ 
     props.ids}`, props.data) }, 

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
    RestartSoftware } = devStatusApi 

第六步：在methods中定义接口使用方法

第六步：在methods中定义接口使用方法

<div @click="reset(scope.row)"></div> 

方法

// 软件重启 reset(scope){ 
    // console.log(scope,"") // onRestartSoftware({id:scope.ids}).then((res)=>{ 
    // console.log(res) // }); // onRestartSoftware({id:"27",ids:"271"}).then((res)=>{ 
    // console.log(res) // }); this.onRestartSoftware(scope); }, //重启软件 onRestartSoftware(scope){ 
    const seatRunRes = RestartSoftware({ 
    id:scope.computerID, ids:scope.id, data:{ 
    // name:"XXX软件", // launcherPath:"XSIMd.exe", // launcherParam:"-name '名字'", // processName:"XSI.exe" name:scope.showName, launcherPath:scope.launcherPath, launcherParam:scope.launcherParam, processName:scope.processName, }, }); return seatRunRes } // 使用数据 this.seatRunData = [...seatRunRes.obj]; 

2.0、post请求方式

第一步：查看接口文档的字段和端口号

第二步：在vue.config.js中，proxy里面定义

自定义名字/api、target地址、pathRewrite同名字

proxy:{ 
    '/api':{ 
    target:"http://172.18.67.220:80/xsim/v1", changOrigin:true, pathRewrite:{ 
    '^/api':'/' } }, '/seatapi':{ 
    target:"http://182.19.67.220:80/xsim/v1", changOrigin:true, pathRewrite:{ 
    '^/seatapi':'/' } } } 

第三步：在文件src/api/serviceConfig.js中，配置和导出api

let api,seatapi if (process.env.NODE_ENV === 'development'){ 
    api = '/devApi'; seatapi = '/seatapi' }else{ 
    api = '/192.168.105.66:8091'; seatapi = '/192.168.105.66:8091'; } export { 
   api,seatapi } 

第四步：新建文件src/api/operationalData/appUpDataApi.js文件，配置接口字段 mplan/selectSeatDataList

import request from 'service'; import { 
    seatapi, api } from 'serviceConfig'; export default { 
    seatRunInfoList(props) { 
    //席位运行信息列表 return request.post(`${ 
     api}/mplan/selectSeatDataList`,props) }, byIdSearchScheme(id){ 
    // 查询席位方案信息 return request.get(`${ 
     seatapi}/seatscheme/getSeatSchemeById?id=${ 
     id}`) }, getPackage(pageNum){ 
    return request.get(`${ 
     api}/msoftware/packageGet?pageNum=${ 
     pageNum}&pageSize=10`) } } 

第五步：在inde.vue界面中进行使用

import devStatusApi from "api/operationalData/devStatusApi" let { 
    seatRunInfoList } = api; 

接口格式-java-api

第六步：在methods中定义接口使用方法getSeatRunList（）

 async getSeatRunList({ 
    roomIds = "", typeIds = "", // cf1b8bf0-d796-4b01-8ed4-c8060c } = { 
   }) { 
    try { 
    const seatRunRes = await seatRunInfoList( this.$qs.stringify({ 
    roomIds: roomIds, typeIds: typeIds, }) ); let seatRunData = []; this.seatRunData = [...seatRunRes.obj]; }catch (err) { 
    console.log(err); } }, 

第七步：在created里进行调用

 await this.getSeatRunList(); 

2.1、post请求方式-须引入

第一步：在src/api/serviceConfig.js中进行定义和导出

let api,seatapi if(process.env.NODE_ENV == "development"){ 
    //配置开发环境 两个端口，两个IP api = "/api"; seatapi = "/seatapi"; }else{ 
    //协商 api = "http://192.168.70.75:8096/"; seatapi = "http://192.168.70.75:8097/"; } export{ 
   api,seatapi} 

第二步：在src/api/operationalData/appUpDataApi.js中进行定义

import request from "service"; import { 
   seatapi,api} from "serviceConfig"; export default { 
    seatRunInfoList(props){ 
    //席位运行信息列表 return request.post(`${ 
     api}/mplan/seatRunInfoList`,props) }, byIdSearchScheme(id){ 
    //查询席位方案信息 return request.get(`${ 
     seatapi}/seatscheme/getSeatSchemeById?id=${ 
     id}`) } } 

第三步：在src/api/operationalData/msoftwareApi.js中进行定义

export default class MsoftwareApi{ 
    //获取席位类型 seatType(params){ 
    return service({ 
    url:`${ 
     api}/msoftware/seatType`, method:"get", params }) }; //获取席位运行列表 seatRun(data){ 
    return service({ 
    url:`${ 
     api}/mplan/seatRun`, method:"post", data }) }; } 

第四步：在src/views/maintenance/swUpdate/index.vue中进行引入

import MsoftwareApi from "api/operationalData/msoftwareApi.js"; import api from "api/operationalData/appUpDataApi" let { 
   seatRunInfoList} = api; // 重新定义接口参数 const { 
   seatType} = new MsoftwareApi(); 

方法中使用

 //获取席位运行信息列表 async getSeatRun({ 
    roomIds = "", typeIds = "" } = { 
   }) { 
    try { 
    const seatRunRes = await seatRun( this.$qs.stringify({ 
    roomIds, typeIds }) ); this.tableData = seatRunRes.obj; return seatRunRes.obj; } catch (err) { 
    console.log(err); } }, 

调用

 //1、获取席位列表 this.getSeatRun(); //2、调用获取列表的方法 this.getSeatRun({ 
    roomIds: roomIds.join(), typeIds: seatIds.join() }); //3、定义获取的数据 const seatRunRes = await this.getSeatRun({ 
    typeIds: data.id }); return seatRunRes; 

3.0、delete请求方式

1、新建文件src/api/basicData/copy.js文件，配置接口字段 mplan/selectSeatDataList

import axios from 'axios' import request from 'service'; // 查询字典类型列表 export function listType(query) { 
    console.log(query) return request({ 
    url: mirrorApi+'/docker/queryByName', method: 'get', params: query }) } // 修改字典类型 export function updateType(data) { 
    return request({ 
    url: mirrorApi+'/system/dict/type', method: 'put', data: data }) } // 删除字典类型 export function delType(dictId) { 
    return request({ 
    url: mirrorApi+'/system/dict/type/' + dictId, method: 'delete' }) } // 清理参数缓存 export function clearCache() { 
    return request({ 
    url: mirrorApi+'/system/dict/type/clearCache', method: 'delete' }) } 

2、在index.vue文件中

methods:{ 
    deleteType(){ 
    //删除类型 this.$https.delete("deleteType",{ 
    params:{ 
   id:this.selectId} }).then((res)=>{ 
    console.log(res) }) .catch(()=>{ 
    this.$message({ 
    type:"warning", message:"已取消删除" }) }) } } 

备注

webpack 相关简单的配置方式

官网地址——webpack 相关简单的配置方式

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js module.exports = { 
    configureWebpack: config => { 
    if (process.env.NODE_ENV === 'production') { 
    // 为生产环境修改配置... } else { 
    // 为开发环境修改配置... } } } 

实例

module.exports = { 
    chainWebpack: config => { 
    // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { 
    config.entry('app').clear().add('./src/main-prod.js') }) // 开发模式 config.when(process.env.NODE_ENV === 'development', config => { 
    config.entry('app').clear().add('./src/main-dev.js') }) } } 

链式操作 (高级)

详细版-参见——https://www.jianshu.com/p/2dd

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

修改 Loader 选项

// vue.config.js module.exports = { 
    chainWebpack: config => { 
    config.module .rule('vue') .use('vue-loader') .tap(options => { 
    // 修改它的选项... return options }) } } 

设置别名

const path = require("path"); function resolve(dir) { 
    return path.join(__dirname, dir); } module.exports = { 
    chainWebpack: config => { 
    config.resolve.alias .set("@$", resolve("src")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")) .set("layout", resolve("src/layout")) .set("base", resolve("src/base")) .set("static", resolve("src/static")) .delete("base"); // 删掉指定的别名 // .clear() 会把全部别名都删掉 } }; 

删除插件

module.exports = { 
    chainWebpack: config => { 
    config.plugins.delete("prefetch"); // 移除 preload 插件 config.plugins.delete("preload"); } }; 

有前后顺序的插件

1

// A插件之前要调用B插件; config .plugin(name) .before(otherName) module.exports = { 
    chainWebpack: config => { 
    config .plugin("b") .use(B) .end() .plugin("a") .use(A) .before(B); } }; 

2

// A插件之后要调用B插件; config.plugin(name).after(otherName); module.exports = { 
    chainWebpack: config => { 
    config .plugin("a") .after("b") .use(A) .end() .plugin("b") .use(B); } }; 

se", resolve(“src/base”))
.set(“static”, resolve(“src/static”))
.delete(“base”); // 删掉指定的别名
// .clear() 会把全部别名都删掉
}
};

 删除插件 ```js module.exports = { chainWebpack: config => { config.plugins.delete("prefetch"); // 移除 preload 插件 config.plugins.delete("preload"); } }; 

有前后顺序的插件

1

// A插件之前要调用B插件; config .plugin(name) .before(otherName) module.exports = { 
    chainWebpack: config => { 
    config .plugin("b") .use(B) .end() .plugin("a") .use(A) .before(B); } }; 

2

// A插件之后要调用B插件; config.plugin(name).after(otherName); module.exports = { 
    chainWebpack: config => { 
    config .plugin("a") .after("b") .use(A) .end() .plugin("b") .use(B); } }; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10882.html