vite知识总结

张开发
• 2026/4/16 21:28:28 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

vite知识总结
vite安装安装命令npm create vitelatest插件安装与配置1安装命令npm add -D vitejs/plugin-legacy安装完成后会在根目录中有个vite.config.js的文件2配置vite.config.js文件import { defineConfig } from vite;export default defineConfig({plugins: [vue()], // 启用Vue支持});3root - 项目根目录export default defineConfig({root: ./src, // 将根目录设置为 src 文件夹});4base - 公共路径export default defineConfig({base: /my-app/, // 应用将被部署到 /my-app/ 子路径});5server - port端口设置export default defineConfig({server: {port: 8080,},});6server - 代理配置(后端api)export default defineConfig({server: {proxy: {/api: {target: http://localhost:5000,changeOrigin: true,rewrite: (path) path.replace(/^\/api/, ), // 去除 /api 前缀},},},});7; build-outDir - 打包输出目录export default defineConfig({build: {outDir: build, // 将打包后的文件输出到 build 目录},});8; build-minify - 代码压缩export default defineConfig({build: {minify: terser, // 使用 terser 进行压缩},});跨域后端接口配置vite.config.js文件import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], server:{ proxy:{ /api:{ target:http://192.168.1.9, changeOrigin:true, rewrite:(path)path.replace(/^\/api/,) } } } })src目录src- utils - request.jsimport axios from axios; const request axios.create({ baseURL:/api }) export default request页面调用template 跨域操作 /template script setup import { onMounted, ref } from vue import request from ../utils/request; const count ref(0) onMounted( async function(){ try{ const res await request.get(/study/public/index/index/api) console.log(res) }catch{ } } ) /script后端接口配置1全局配置axiosmian.js代码如下//--------------------------main.js----------------------------- import { createApp } from vue import App from ./App.vue // 引入axios import axios from axios; const appcreateApp(App); //使用vue api 配置全局(取名叫axios) app.config.globalProperties.axiosaxios //使用vue api 配置全局msg字符 app.config.globalProperties.msg hello app.mount(#app) //--------------------------普通页面调用----------------------------- script setup //1引入 getCurrentInstance 从vue种 import {onMounted, ref , getCurrentInstance} from vue const count ref(0) //2得到getCurrentInstance方法并取名 instance const instance getCurrentInstance() //3; instance.proxy.axios const axios instance.proxy.axios //4; 用axios进行以下操作 axios({ method:get, url:http://192.168.1.9/study/public/index/index/api, data:{ id:1 } }).then(function(res){ console.log(res.data) }) onMounted((){ // 通过getCurrentInstance的实例instance.proxy 调用msg字符 console.log(instance.proxy.msg) }) /script打包和部署一打包命令 运行命令 npm run build 。二部署1; 通过 npm run build 打包命令生产的dist文件2把dist文件内容赋值到服务器www跟目录下这个时候通过会在跟目录创建一个文件例如abc文件把dist文件内容都复制进去。3注意事项3.1在vite.config.js 里配置base名称要和www目录下文件名称一直 比如都是abc文件名。3.2; base配置项用于定义开发服务器的基础路径三预览一般不需要1找到dist文件运行命令 npm run preview2浏览器访问该地址 http://localhost:4173 默认端口41733如果更改端口4173 就在package.json 里更改如下代码// 默认情况下 scripts: { dev: vite, build: vite build, preview: vite preview }, // 更改预览 preview { scripts: { preview: vite preview --port 8080 } }

更多文章