欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > vue3打包配置

vue3打包配置

2025/10/16 1:00:32 来源:https://blog.csdn.net/yangyanqin2545/article/details/142857836  浏览:    关键词:vue3打包配置

vue3打包配置

1、vite.config.js文件

主要配置在于base和build

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, 'src')},extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']},define: {__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'},base: '/qc/', // 应用的基本路径前缀plugins: [vue(),vueJsx()],css: {preprocessorOptions: {less: {javascriptEnabled: true}}},server: {host: '0.0.0.0',port: 9530,open: true, //在服务器启动时自动在浏览器中打开应用程序headers: {'Cross-Origin-Embedder-Policy': 'require-corp','Cross-Origin-Opener-Policy': 'same-origin'},proxy: {'/yxy-api': {target: 'http://172.16.15.71:8008',changeOrigin: true,rewrite: (path) => path.replace(/^\/yxy-api/, '')}}},build: {chunkSizeWarningLimit: 160000,outDir: 'yxy-qc-front'}
})

2、路由模式

(1)将路由模式修改为history,将路由模式修改为history模式时,正常访问是没有问题的,但当界面刷新时,会出现404的问题,该问题需要后端配合

try_files $uri $uri/ /screen/index.html; 

(2)路由前统一添加前缀

const router = createRouter({routes: constantRoutes,history: createWebHistory('/qc'),scrollBehavior: () => ({ left: 0, top: 0 })
})

3、环境文件中的配置

(1)env.development.js

# base api
VITE_API_TARGET = '/yxy-api'

(2)env.production.js

# base api
VITE_API_TARGET = '/qc-api'

由于在本地开发和线上部署的环境,需要请求的地址前缀是不一样的,所以需要在各自的环境文件中去进行配置,来满足不用的需求

(3)在界面使用

export const TARGET = import.meta.env.VITE_API_TARGET

4、有时候我们项目中会用到其他应用的地址,但是该应用的地址是不确定的,因此需要将该动态的地址放在public文件夹中,该文件夹中的东西是不参与打包的,我们可以方便快捷的修改打包后文件,快速部署应用

(1)env.development.json

{"loginSite": "http://172.16.15.71:8080","basePrefix": "/qc"
}

(2)env.production.json

{"loginSite": "http://172.16.17.102:7098/portal/#/login/index","basePrefix": "/qc"
}

(3)获取配置变量函数

export async function loadEnvConfig() {const env = import.meta.env.MODEconst configPath = `/env.${env}.json`try {const response = await fetch(configPath)return await response.json()} catch (error) {console.error('Failed to load config:', error)// 可以在这里提供一个默认配置或抛出异常return {loginSite: 'http://172.16.17.102:7098/portal/#/login/index'}}
}

(4)在界面中使用

const handleLoginOut = () => {Modal.confirm({title: '提示',icon: createVNode(ExclamationCircleOutlined),content: '您确定要退出系统吗?',okText: '确认',cancelText: '取消',centered: true,destroyOnClose: true,onOk() {return new Promise(async (resolve) => {removeLocalToken()const envConfig = await loadEnvConfig()window.location.href = envConfig?.loginSiteresolve()}).catch((reject) => console.error('退出时候报错:' + reject))},onCancel() {}})
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词