活动介绍

Vue.config.productionTip = false Vue.use(http).use(ElementUI).use(dateUtil) Vue.prototype.Apis = Apis new Vue({ render: h => h(App), router, store }).$mount('#app')

时间: 2024-04-02 16:36:49 浏览: 152
这是一个使用Vue.js框架开发的web应用程序的入口文件,其中: 1. `Vue.config.productionTip = false` 禁用 Vue 在启动时生成生产提示的消息。 2. `Vue.use(http).use(ElementUI).use(dateUtil)` 使用了三个Vue插件: - `http`:用于发送HTTP请求的插件; - `ElementUI`:饿了么前端团队开发的一套基于Vue.js 2.0的组件库; - `dateUtil`:自定义的日期工具插件。 3. `Vue.prototype.Apis = Apis` 将一个自定义的API对象 `Apis` 添加到Vue的原型上,以便在整个应用程序中可以使用该API对象。 4. `new Vue({ render: h => h(App), router, store }).$mount('#app')` 创建一个Vue实例,将渲染组件 `App`,并将该实例挂载到id为 `app` 的DOM元素上。其中还包括应用程序使用的路由和状态管理器。
相关问题

import Vue from 'vue' import App from './App.vue' import dateUtil from './libs/dateUtil' import router from './router' import store from './store' import ElementUI from 'element-ui' import http from './libs/http' import Apis from './libs/api' import 'reset.css/reset.css' import 'bpmn-js/dist/assets/diagram-js.css' import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css' import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css' import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css' import './components/bpmn/assets/css/vue-bmpn.css' import 'element-ui/lib/theme-chalk/index.css' import './assets/css/element-ui.css' import './assets/css/iconfont.css' Vue.config.productionTip = true Vue.use(http).use(ElementUI).use(dateUtil) Vue.prototype.Apis = Apis new Vue({ render: h => h(App), router, store }).$mount('#app')

这段代码是一个 Vue.js 项目的入口文件,主要作用是引入各种依赖和配置,并启动应用。其中,import 语句用于引入各种依赖,包括 Vue.js 框架本身、第三方组件库 ElementUI、自定义的工具类 dateUtil、http 封装库和接口定义文件 Apis。接着,设置了一些全局的配置,包括 Vue 的生产模式提示、注册所需的插件和挂载接口定义文件。最后,创建了一个 Vue 实例,并将其挂载到指定的 DOM 元素上。在这个实例中,使用了 App.vue 组件作为根组件,并传入了路由和 Vuex 状态管理对象作为参数。整个项目的运行逻辑都是由这个入口文件启动的。

vue.config.js proxy

在vue.config.js中,proxy用于配置代理。通过配置proxy,可以将请求转发到指定的目标地址。在引用\[1\]中的示例中,proxy配置了两个代理。第一个代理将以/api/开头的请求转发到http://localhost:8060,第二个代理将以/apis开头的请求转发到https://example.com。在引用\[2\]中的示例中,proxy配置了两个代理。第一个代理将以/v1开头的请求转发到https://monitor-api.xxx,第二个代理将以/(d|api|login|public)/开头的请求转发到https://monitor-third-pard-api.xxx。在引用\[3\]中的示例中,proxy配置了一个代理,将以/chc-shop开头的请求转发到https://www.zhbbroker.cn。这样配置代理可以实现在开发环境中解决跨域问题,将请求转发到指定的目标地址。 #### 引用[.reference_title] - *1* [vue.config.js中配置proxy代理https](https://blog.csdn.net/hbiao68/article/details/121718528)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [[vue]vue.config.js之proxy代理配置](https://blog.csdn.net/tjj3027/article/details/124042186)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue.config.js配置proxy代理解决跨越;proxy代理报404;](https://blog.csdn.net/i_am_a_div/article/details/127517818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
阅读全文

相关推荐

Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (65:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& 4:14-558 14:3-18:5 15:22-566 @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue @ ./src lazy ^\.\/views.*$ namespace object @ ./src/utils/safe.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (7:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& 4:14-545 14:3-18:5 15:22-553 @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue @ ./src lazy ^\.\/views.*$ namespace object @ ./src/utils/safe.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src lazy ^\.\/views.*$ namespace object Module not found: Error: [CaseSensitivePathsPlugin] D:\projects\subwaysoft-plus-bjzj-web\src\views\Index\supervise\singleProject\components\SupChek\taskProcessing\components\AllNumCheckDialog.js does not match the corresponding path on disk allNumCheckDialog.js. WARNING Compiled with 11 warnings 16:27:36 warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'EXIT' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'ROLE_USER_CODE' was not found in '@/apis/basic/admin' warning in ./src/views/public/SSOLogin.vue?vue&type=script&lang=js& "export 'SYSMENU_HALL_LIST' was not found in '@/apis/basic/admin' warning in ./src/views/public/SSOLogin.vue?vue&type=script&lang=js& "export 'SYSMENU_ONE_HALL_LIST' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'UPDATE_PWD_BYSELF' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'UPDATE_PWD_BYSELF' was not found in '@/apis/basic/admin' warning in ./src/components/public/layout/Index.vue?vue&type=script&lang=js& "export 'USER_DETAIL' was not found in '@/apis/basic/admin' warning in ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (13:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& 4:14-592 14:3-18:5 15:22-600 @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue?vue&type=style&index=0&id=5d017548&lang=less&scoped=true& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/components/BaseInfo.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/taskProcessing/FireDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/SupChek/SupTaskProcessing.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/components/TabsProcess.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/TabsProcess.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/components/TabsProcess.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/supervise/singleProject/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/supervise/singleProject/Index.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (65:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& 4:14-558 14:3-18:5 15:22-566 @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue?vue&type=style&index=0&id=73864b24&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/modules/workPlan/Extraction.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/workPlan/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/workPlan/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/workPlan/Index.vue @ ./src/views/Index/fireControl/business/layout/routeUrl.js @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue @ ./src/router/fireMain.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (7:3) end value has mixed support, consider using flex-end instead @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& 4:14-545 14:3-18:5 15:22-553 @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue?vue&type=style&index=0&id=f3814272&lang=less&scoped=true& @ ./src/views/Index/fireControl/business/components/QuoteFileDialog.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/modules/drawings/Index.vue @ ./src/views/Index/fireControl/business/layout/routeUrl.js @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/layout/right.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue?vue&type=script&lang=js& @ ./src/views/Index/fireControl/business/Index.vue @ ./src/router/fireMain.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.3.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src lazy ^\.\/views.*$ namespace object Module not found: Error: [CaseSensitivePathsPlugin] D:\projects\subwaysoft-plus-bjzj-web\src\views\Index\supervise\singleProject\components\SupChek\taskProcessing\components\AllNumCheckDialog.js does not match the corresponding path on disk allNumCheckDialog.js.

<template> <van-circle v-model:current-rate="img.progress" :rate="100" :speed="10" size="120rem" :stroke-width="20" stroke-linecap="round" class="progress" > {{ img.progress }}% </van-circle> <van-icon name="warning" size="32rem" color="#ff4444" /> 上传失败 <van-button type="primary" size="small" @click="reUpload(idx)" style="margin-top: 16rem">重新上传</van-button> <van-icon name="cross" size="32rem" color="#fff" /> <van-icon name="plus" size="64rem" color="#bbb" /> <input ref="fileInput" type="file" multiple accept="image/*" style="display: none" @change="handleFileChange" /> </template> <script setup lang="ts"> import { apis } from '@/api' import System from '@/utils/System' import { showToast } from 'vant' import { ref, onUnmounted } from 'vue' const emit = defineEmits(['update:modelValue']) const props = defineProps({ autoUpload: { type: Boolean, default: true }, maxCount: { type: Number, default: 9 }, modelValue: { type: Array as () => imgageItem[], default: () => [] } }) interface imgageItem { url: string progress: number status: 'pending' | 'uploading' | 'success' | 'error' file?: File } const fileInput = ref<HTMLInputElement | null>(null) const images = ref<imgageItem[]>(props.modelValue) const onAddImg = () => { fileInput.value?.click() } const removeImg = async (idx: number) => { images.value.splice(idx, 1) emit('update:modelValue', [...images.value]) } // const handleFileChange = async (e: Event) => { // const target = e.target as HTMLInputElement // const files = target.files // if (!files || files.length === 0) return // for (const file of Array.from(files)) { // if (images.value.length >= props.maxCount) break // try { // const reader = new FileReader() // console.log("🚀 ~ handleFileChange ~ reader:", reader) // reader.onload = (ev) => { // if (typeof ev.target?.result === 'string') { // const index = images.value.length // images.value.push({ // url: ev.target.result, // 临时预览URL // progress: 0, // status: 'pending', // file: file // }) // console.log("🚀 ~ handleFileChange ~ images.value:", images.value) // if (props.autoUpload) { // uploadFile(file, index) // } // reader.readAsDataURL(file) // } // } // // 清空 input // ;(e.target as HTMLInputElement).value = '' // // 更新父组件 // emit('update:modelValue', [...images.value]) // } catch (error) { // System.toast('图片处理失败') // console.error('文件处理错误:', error) // } // } // // 清空文件选择器 // ;(e.target as HTMLInputElement).value = '' // } const handleFileChange = (e: Event) => { const files = (e.target as HTMLInputElement).files if (files && files.length > 0) { Array.from(files).forEach((file) => { if (images.value.length >= 6) return const reader = new FileReader() reader.onload = (ev) => { if (typeof ev.target?.result === 'string') { const index = images.value.length images.value.push({ url: ev.target.result, // 临时预览URL progress: 0, status: 'pending', file: file }) // 开始上传 if (props.autoUpload) { uploadFile(file, index) } } } reader.readAsDataURL(file) }) emit('update:modelValue', [...images.value]) // 清空 input ;(e.target as HTMLInputElement).value = '' } } const uploadFile = async (file: File, index: number) => { // try { images.value[index].status = 'uploading' // 调用API上传 const formData = new FormData() formData.append("file",file) const res: any = await apis.uploadFile({ file: formData.get('file') }, (progressEvent: { loaded: number; total: number }) => { if (progressEvent.total > 0) { images.value[index].progress = Math.round((progressEvent.loaded / progressEvent.total) * 100) } }) if (res.code === 200) { images.value[index].status = 'success' images.value[index].url = res.data } else { images.value[index].status = 'error' System.toast('图片上传失败') } emit('update:modelValue', [...images.value]) // } catch (error) { // images.value[index].status = 'error' // System.toast('图片上传失败') // console.error('上传错误:', error) // emit('update:modelValue', [...images.value]) // } } // 自动上传全部待上传图片 const autoUploadAll = () => { images.value.forEach((img, index) => { if (img.status === 'pending' && img.file) { uploadFile(img.file, index) } }) } // 重新上传指定失败图片 const reUpload = (index: number) => { if (images.value[index].status !== 'error' || !images.value[index].file) return images.value[index].status = 'pending' uploadFile(images.value[index].file!, index) } // 组件卸载时清理临时文件 onUnmounted(async () => {}) defineExpose({ autoUploadAll, reUpload }) </script> <style lang="less" scoped> .news-images { display: flex; flex-wrap: wrap; gap: 18.5rem; margin-bottom: 48rem; .news-img-wrap { position: relative; width: 216rem; height: 216rem; border-radius: 23rem; overflow: hidden; margin-bottom: 32rem; // 新增,保证多行间距 .progress-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 2; .progress { display: flex; align-items: center; justify-content: center; } .progress-text { color: #fff; font-size: 24rem; } } .error-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; span { color: #fff; font-size: 24rem; margin-top: 8rem; } } .news-img { width: 100%; height: 100%; object-fit: cover; border-radius: 24rem; } .img-close { position: absolute; top: 8rem; right: 8rem; background: rgba(0, 0, 0, 0.4); border-radius: 50%; width: 40rem; height: 40rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } } .news-img-add { width: 216rem; height: 216rem; background: #f6f6f6; border-radius: 23rem; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 32rem; // 保持添加按钮与图片对齐 .van-icon { font-weight: bold; } } } </style> 这个代码帮我解决

import { resolve } from 'path'; import { loadEnv } from 'vite'; import type { UserConfig, ConfigEnv } from 'vite'; import Vue from '@vitejs/plugin-vue'; import VueJsx from '@vitejs/plugin-vue-jsx'; import progress from 'vite-plugin-progress'; import EslintPlugin from 'vite-plugin-eslint'; import { ViteEjsPlugin } from 'vite-plugin-ejs'; import { viteMockServe } from 'vite-plugin-mock'; import PurgeIcons from 'vite-plugin-purge-icons'; import ServerUrlCopy from 'vite-plugin-url-copy'; import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'; import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; import { createStyleImportPlugin, ElementPlusResolve, } from 'vite-plugin-style-import'; import UnoCSS from 'unocss/vite'; import { visualizer } from 'rollup-plugin-visualizer'; // https://vitejs.dev/config/ import process from 'node:process'; import Federation from '@originjs/vite-plugin-federation'; import exposes from './exposes'; const root = process.cwd(); function pathResolve(dir: string) { return resolve(root, '.', dir); } export default ({ command, mode }: ConfigEnv): UserConfig => { let env = {} as any; const isBuild = command === 'build'; if (!isBuild) { env = loadEnv( process.argv[3] === '--mode' ? process.argv[4] : process.argv[3], root, ); } else { env = loadEnv(mode, root); } return { base: env.VITE_BASE_PATH, plugins: [ Vue({ script: { // 开启defineModel defineModel: true, }, }), VueJsx(), ServerUrlCopy(), progress(), env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false' ? createStyleImportPlugin({ resolves: [ElementPlusResolve()], libs: [ { libraryName: 'element-plus', esModule: true, resolveStyle: (name) => { if (name === 'click-outside') { return ''; } return element-plus/es/components/${name.replace( /^el-/, '', )}/style/css; }, }, ], }) : undefined, EslintPlugin({ cache: false, failOnWarning: false, failOnError: false, include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'], // 检查的文件 }), VueI18nPlugin({ // runtimeOnly: true, compositionOnly: true, include: [resolve(__dirname, 'src/locales/**')], }), createSvgIconsPlugin({ iconDirs: [pathResolve('src/assets/svgs')], symbolId: 'icon-[dir]-[name]', svgoOptions: true, }), PurgeIcons(), env.VITE_USE_MOCK === 'true' ? viteMockServe({ mockPath: 'mock', enable: !isBuild, }) : undefined, ViteEjsPlugin({ title: env.VITE_APP_TITLE, }), UnoCSS({ mode: 'global' }), Federation({ name: 'purchasecenter', filename: 'remoteEntry.js', exposes, }), ], css: { preprocessorOptions: { scss: { additionalData: '@use "@/styles/variables.module.scss" as *;', }, }, }, resolve: { extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css', ], alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js', }, { find: /\@\//, replacement: ${pathResolve('src')}/, }, ], }, esbuild: { pure: env.VITE_DROP_CONSOLE === 'true' ? ['console.log'] : undefined, drop: env.VITE_DROP_DEBUGGER === 'true' ? ['debugger'] : undefined, }, build: { target: 'es2015', outDir: env.VITE_OUT_DIR || 'dist', sourcemap: env.VITE_SOURCEMAP === 'true', minify: false, // brotliSize: false, rollupOptions: { plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined, // 拆包 output: { manualChunks: { 'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'], 'element-plus': ['element-plus'], 'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'], echarts: ['echarts', 'echarts-wordcloud'], }, }, }, cssCodeSplit: !(env.VITE_USE_CSS_SPLIT === 'false'), cssTarget: ['chrome31'], }, server: { port: 4000, proxy: { // 选项写法 '/api': { target: 'http://10.114.72.169:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, '/be-saleslink-masterdata-product': { target: 'https://saleslink-dev.byd.com/', changeOrigin: true, }, // '/sales-link-masterdata': { // target: 'http://10.114.72.87:8080', // changeOrigin: true, // }, '/sales-purchase': { target: 'https://saleslink-dev.byd.com', // target: 'http://10.114.72.113:8080', changeOrigin: true, }, '/sales-vehicle': { target: 'https://saleslink-dev.byd.com', changeOrigin: true, }, '/sales-operation': { target: 'https://saleslink-dev.byd.com', // target: 'http://10.114.72.23:8080', changeOrigin: true, }, '/confcntr': { target: 'https://saleslink-dev.byd.com', changeOrigin: true, }, '/sales-stock': { target: 'https://saleslink-dev.byd.com', changeOrigin: true, }, '/saleslink-sku': { target: 'https://saleslink-dev.byd.com/', changeOrigin: true, secure: false, rewrite: (path) => path.replace(/^\/saleslink-sku/, ''), }, }, hmr: { overlay: false, }, host: '0.0.0.0', }, optimizeDeps: { include: [ 'vue', 'vue-router', 'vue-types', 'element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', '@vueuse/core', 'axios', 'qs', 'echarts', 'echarts-wordcloud', 'qrcode', '@wangeditor/editor', '@wangeditor/editor-for-vue', 'vue-json-pretty', '@zxcvbn-ts/core', 'dayjs', 'cropperjs', ], }, }; }; 这是vite.config.ts 现在想要连接后端的本地,怎么修改

最新推荐

recommend-type

Spring Boot引入swagger-ui 后swagger-ui.html无法访问404的问题

除此之外,为了使前端更好地利用Swagger生成的API文档,可以考虑使用前端库(如Vue.js的typescript版本)来自动化生成调用API的代码。例如,可以参考文章中提到的开源npm库,以便前端使用axios更方便地调用API。 ...
recommend-type

中孚密保卫士是由中孚信息股份有限公司开发的一款信息安全产品,主要用于终端计算机的保密管理和数据防泄漏 它主要面向政府机关、军工单位、科研院所等对信息安全有较高要求的涉密单位,帮助其实现对涉密信息的全

终端保密管理:对计算机终端的操作行为进行监控和审计,防止违规外联、非法拷贝、打印、截屏等行为。 数据防泄漏(DLP):通过内容识别、加密、权限控制等手段,防止敏感或涉密数据通过U盘、网络、邮件等途径泄露。 文件加密与权限控制:对涉密文件进行透明加密,确保文件在授权范围内使用,防止未授权人员查看或传播。 行为审计与日志记录:详细记录用户的操作行为(如文件访问、外发、打印等),便于事后追溯和审计。 违规外联监控:防止涉密计算机违规连接互联网或其他非授权网络,保障网络边界安全。 移动存储介质管理:对U盘、移动硬盘等设备进行授权管理,区分普通盘和专用盘,防止非法数据拷贝。
recommend-type

快速浏览Hacker News热门故事的浏览器扩展

Hacker News Browser-crx插件是一款专为浏览器设计的扩展程序,它允许用户从任何网页上浏览Hacker News上的热门故事,该网站是科技界尤其是编程和创业圈子中非常受欢迎的信息交流平台。Hacker News上的内容主要包括编程、科技创业、互联网趣闻以及相关的讨论。它由Y Combinator(一家知名的硅谷创业孵化器)所维护。 ### 关键知识点解析: 1. **扩展程序(Extension)**: - 扩展程序是一种软件,旨在为浏览器提供额外功能和定制选项。它们可以增强用户的浏览体验,提高效率和安全性。扩展程序通常开发于HTML、CSS和JavaScript技术栈,可以针对不同的浏览器开发,如Chrome、Firefox、Safari等。 2. **Hacker News简介**: - Hacker News(也称为Hacker News或者HN)是一个新闻社交网站,由Paul Graham和Trevor Blackwell等人于2007年发起,隶属于Y Combinator。它提供了一个平台,让用户分享、讨论技术新闻和创业公司的相关文章。Hacker News社区以其高质量的讨论和新闻而闻名,吸引了大量程序员、企业家和科技爱好者。 3. **Hacker News Browser-crx插件功能**: - **浏览过去24小时的热门故事**:插件允许用户查看Hacker News中最近24小时内的热门内容。这为用户提供了快速获取当前科技界热门话题的途径。 - **保存故事到Pocket**:Pocket是一个服务,允许用户保存文章、视频和网页以便离线阅读。Hacker News Browser-crx插件可以与用户的Pocket账户集成,方便用户保存他们感兴趣的内容到自己的Pocket列表中。 - **直接从扩展发推文**:社交媒体是现代信息传播的一个重要渠道。通过这个功能,用户可以将他们在Hacker News上的发现直接通过Twitter分享给他们的关注者。 - **搜索特定主题**:用户可以使用这个功能来搜索Hacker News上的特定主题或关键词,从而快速定位他们感兴趣的内容。 4. **如何使用Hacker News Browser-crx插件**: - 安装扩展:用户需要从浏览器的扩展商店下载并安装Hacker News Browser-crx插件。由于给定信息中提供的文件名为Hacker_News_Browser.crx,这表明这可能是一个Chrome扩展。 - 启用扩展:安装完成后,用户需要在浏览器的扩展管理界面启用该插件。 - 进行配置(可选):根据需要,用户可能需要对插件进行一些基本配置,比如设置Pocket账户等。 - 使用功能:安装并配置完成后,用户可以开始使用扩展提供的各项功能,包括浏览热门故事、保存内容到Pocket、发推文和搜索特定主题。 ### 总结: Hacker News Browser-crx插件作为一个扩展程序,为用户提供了便捷的途径去浏览和参与Hacker News上的讨论。该插件整合了多种功能,让读者能够实时关注科技动态,并与他人分享讨论。对于科技爱好者以及相关行业的专业人士,这是一个极具价值的工具,它能够帮助他们保持信息的及时更新和知识的持续吸收。
recommend-type

【MATLAB通信建模秘籍】:5个技巧让你为通信系统打下坚实基础

# 1. MATLAB通信建模基础概览 MATLAB(矩阵实验室)作为一种强大的科学计算软件,在通信系统建模和仿真领域扮演着重要角色。对于初学者而言,了解MATLAB的基础操作和通信建模的基本概念是开启深入学习之旅的第一步。 ## 1.1 MATLAB简介及其在通信领域的应用 MATLAB是一个高性能的数值计算和可视化软件,广泛应用于工程计算、算法开发、数据分析等领域。在通
recommend-type

汽车车载通讯技术

<think>我们正在讨论汽车车载通讯技术。根据之前的引用,我们知道汽车通信网络分为车内(有线)和车外(无线)两部分。同时,车载SOA架构使用多种通信技术(如CAN总线、以太网、MQTT等)来实现模块化和可扩展的通信。 用户的问题:汽车车载通讯技术原理及应用 回答结构: 1. 概述:简要介绍汽车车载通讯技术的定义和分类。 2. 原理部分:分别介绍车内网络和车外网络的主要技术原理。 2.1 车内网络:重点介绍CAN总线、LIN总线、FlexRay、MOST、Automotive Ethernet等。 2.2 车外网络:介绍V2X(包括V2V、V2I、V2P、V2N)及相
recommend-type

Dev Context Menu Utils (beta)-快速开发浏览器扩展

Dev Context Menu Utils (beta)-crx插件是一款面向开发者群体的浏览器扩展程序,其beta版本的命名暗示了它目前还在开发的早期阶段,可能尚未完全稳定或者未包含全部功能。从标题来看,这款扩展程序旨在为开发者提供便捷的上下文菜单功能。 上下文菜单(Context Menu)通常指的是当用户在软件或网页上右键点击时弹出的菜单。上下文菜单的内容根据点击的位置和对象会有所不同,它可以为用户提供快捷、针对当前情境的操作选项。在浏览器中,上下文菜单经常被用于快速访问开发者工具、页面操作、或是网页内容处理等功能。 标题中提到的“CNPJ”和“CPF”是巴西的法人和自然人的税务识别代码。CNPJ(Cadastro Nacional de Pessoas Jurídicas)是巴西所有公司和企业的全国性注册代码,而CPF(Cadastro de Pessoas Físicas)是巴西公民的个人税务识别码。在Dev Context Menu Utils (beta)中加入这两个菜单项,可能意味着插件能够让开发者在遇到需要验证或输入这些税务识别码的场景时,通过浏览器的右键菜单快速生成示例代码或进行其他相关操作。 “Lorem Ipsum”是设计和排版行业常用的一种占位文本,它起源于拉丁文学,经常用于设计软件的文本预览,以便设计师在不影响最终版式的情况下测试页面布局。在这款插件的上下文菜单中加入这一项,可能允许用户快速生成一段Lorem Ipsum文本,用于测试网页布局或者排版效果,从而让开发者在设计过程中获得更真实的视觉体验。 “电话”菜单项则可能用于提供快速生成或者验证电话号码格式的功能,这对于处理与电话相关的用户输入或数据录入工作非常有用。考虑到不同国家和地区的电话号码格式可能有所不同,这一功能可能允许用户选择特定的地区代码,从而生成相应格式的电话号码样例。 【标签】中提到的“扩展程序”一词,是指能够被浏览器安装并添加额外功能的软件。扩展程序可以改变浏览器的基本界面、行为和功能,是Web开发和测试中常见的工具。它们通常由浏览器的开发者或者第三方开发者创建,对于提升开发效率、调试和测试网站有着重要的作用。 【压缩包子文件的文件名称列表】中的“Dev_Context_Menu_Utils_(beta).crx”是这款插件的文件名,CRX是Chrome扩展程序的文件格式,类似于Windows平台上的.exe可执行文件格式,只不过CRX是为Chrome浏览器特别设计的。扩展程序开发者需要通过Chrome Web Store或者其他途径将CRX文件分发给用户,用户可以通过下载并安装CRX文件来使用扩展程序。 总体来说,Dev Context Menu Utils (beta) 插件通过为开发者提供便捷的上下文菜单项来增强开发效率,允许快速生成重要的代码片段和数据格式,从而简化开发过程中的常见任务。对于那些在开发阶段需要频繁使用这些功能的开发者来说,这款插件将是一个非常有价值的工具。然而,由于它目前还是beta版本,使用时可能需要注意可能存在的一些错误或功能限制,并建议开发者在实际项目中使用前先在测试环境中进行充分的测试。
recommend-type

【Coz进阶秘籍】:解锁工作流高级功能,提升效率的终极技巧

# 1. Coz工作流基础概述 工作流系统是现代IT运营不可或缺的一部分,它通过自动化执行任务和协调业务流程来提高效率。在本章节中,我们将首先介绍Coz工作流的基础概念和其在业务流程自动化中的应用。Coz工作流利用一系列预定义的任务、规则以及任务之间的依赖关系,按照既定规
recommend-type

HR和HRBP区别

<think>首先,用户意图是了解HR和HRBP的区别。用户问题是“HR和HRBP的区别”。我需要根据任务要求进行网络搜索。 任务要求: 1. 调用网络搜索工具进行检索。 2. 整合检索到的内容,生成详细且清晰的回答。 3. 禁止将所有引用内容集中在回答末尾。 4. 避免使用第一人称如“我”。 5. 避免步骤词汇如“首先”、“然后”。 6. 尽量将答案组织为多个方法或步骤,并在每个步骤间换行。 7. 对于代码和公式:如果有,必须使用指定格式。 8. 在回答最后添加相关问题部分,标题为“§§相关问题§§:”,后跟至少3个相关问题,每个用阿拉伯数字标号。 由于问题是关于HR和HRBP的区别,不
recommend-type

阻止Web加密货币挖掘的Miner Away扩展

### 知识点分析 #### 标题:“Miner Away-crx插件” **知识点**: 1. **CRX插件格式**:CRX是Chrome扩展程序的文件格式,它是一个ZIP压缩包,包含了扩展程序的所有文件和文件夹,例如HTML、JavaScript、CSS文件,以及扩展程序的清单文件(manifest.json)。CRX文件可以直接在Chrome浏览器的扩展管理界面拖拽安装。 2. **扩展程序(Extension)**:浏览器扩展程序是一种增加或改进浏览器功能的软件模块。它可以通过第三方开发者创建,用以提供特定的功能,比如用户界面定制、广告拦截、内容过滤等。 #### 描述:“在网上停止硬币矿工!” **知识点**: 3. **加密货币挖掘(Cryptocurrency Mining)**:指的是利用计算机的处理能力来计算加密货币的交易并维护区块链的过程。传统的加密货币挖掘需要大量的计算资源和电力消耗,近年来出现了基于Web的挖矿,即在网页中嵌入JavaScript代码,利用访问者的浏览器进行挖掘。 4. **矿工拒绝(Cryptominer Blocking)**:矿工拒绝功能的扩展通常用于识别和阻止这类JavaScript代码运行,从而保护用户设备的性能不受影响。这类扩展程序通常会维护一个黑名单,其中包含已知的挖矿脚本或网站地址。 5. **Opera Web Store**:Opera浏览器的官方扩展商店,类似于Chrome Web Store或Firefox Add-ons,是用户下载、安装和管理Opera浏览器扩展程序的平台。 6. **特征(Features)**: - **阻止JavaScript或Web矿工**:扩展能够检测并阻止网页加载的挖矿脚本。 - **域名选择性允许**:用户可以自行选择允许哪些特定网站加载JavaScript。 - **状态显示**:扩展程序会实时显示当前是否有挖矿行为发生。 - **通知功能**:当有网站尝试进行挖矿时,用户会即时收到桌面通知。 7. **技术实现细节**: - **黑名单机制**:扩展使用黑名单文件(*blacklist.txt*),其中包含被识别为执行挖矿行为的域名。 - **请求拦截**:对与黑名单中域名匹配的网站请求进行拦截,从而防止挖矿脚本运行。 #### 标签:“扩展程序” **知识点**: 8. **浏览器扩展程序的分类**:扩展程序通常根据其功能进行分类,如广告拦截器、密码管理器、下载管理器等。 9. **扩展程序的管理**:用户通常可以在浏览器的扩展管理界面中开启/关闭扩展、管理扩展权限、删除扩展等。 #### 压缩包子文件的文件名称列表:“Miner_Away.crx” **知识点**: 10. **文件命名约定**:扩展程序的文件名通常与其功能相关,例如本例中的“Miner_Away”暗示了该扩展用于阻止挖矿行为。 11. **文件的安装**:CRX文件可以通过多种方式进行安装,最常见的方式是直接从浏览器的扩展管理界面导入(通常通过拖拽文件到浏览器窗口),或者从扩展商店下载安装。 12. **文件的安全性**:用户应从可信来源下载扩展程序,避免下载可能含有恶意软件的非官方版本。 总结以上知识点,Miner Away扩展程序是一种专门设计用于阻止Web矿工的浏览器扩展,它通过黑名单机制拦截和阻止网站加载的加密货币挖掘脚本,保护用户的设备免受未经授权的资源消耗。该扩展还提供实时状态通知和请求拦截功能,为用户提供了更为安全和高效的网络浏览体验。
recommend-type

量子计算模拟与硬件发展:NISQ时代的探索

# 量子计算模拟与硬件发展:NISQ时代的探索 ## 1. 分布式计算在量子模拟中的应用 在量子计算领域,充分利用经典资源是一个重要的课题。分布式计算框架为我们提供了一种有效的途径,如今,这些框架在各大组织中广泛存在。例如,Apache Spark和Ray等分布式计算框架,已被广泛应用于大数据处理和深度学习模型训练。 量子计算模拟器也可以借助分布式生态系统,通过拆分需要执行的数学运算来实现。不过,将一个整体系统拆分为一组独立操作,需要我们深入理解当前问题的可拆分性。目前,处理分布式量子计算模拟的框架大多来自研究团队,像英特尔和百度等大型组织也有相关研究。 随着量子硬件的不断成熟,设备无关