先npm run build:dev,再npm run preview http://localhost:4173/打开这个链接,就是vite为你启的服务,运行的项目。 三:路由配置 1,我是采用路由文件和页面文件一一对应的方式,先分模块,建立对应的文件夹,这样项目越来越大也不害怕,方便管理。 2,安装一下vue-router,npm install vue-router; mian.ts文件里面use...
找到package.json 文件进行配置不同环境下的打包命令 "scripts": {"dev": "vite --open","build": "vue-tsc && vite build", // 开发"build:test": "vue-tsc && vite build --mode test", // 测试"build:pro": "vue-tsc && vite build --mode production", // 生产"preview": "vite preview...
找到package.json 文件进行配置不同环境下的打包命令 代码语言:javascript 复制 "scripts":{"dev":"vite --open","build":"vue-tsc && vite build",// 开发"build:test":"vue-tsc && vite build --mode test",// 测试"build:pro":"vue-tsc && vite build --mode production",// 生产"preview":"v...
首先设置 dev 为开发环境启动, 设置server 为生产环境启动, 设置--mode 可更改环境配置, 然后开始配置 vite.config.ts 文件; 顶部新增引入 import{ defineConfig, loadEnv }from"vite";// loadEnv 新增引入 然后改变原文件代码 // export default defineConfig {// plugins: [vue()],// }// 改为函数形式...
3.多环境配置 创建文件 .env (开发环境) VITE_BASE_API='http://localhost:8081/' 创建文件 .env.production(生产环境) VITE_BASE_API=http://localhost:9999/' vite.config.ts // vite.config.ts import vue from '@vitejs/plugin-vue'; // loadEnv ...
1 引言 用 vite 创建的 vue3+ts 项目后,在 vscode 中打开,可以看到缺少很多 vue 开发必备依赖库与插件(如下图)。同时,有些配置与 vue-cli 建立的项目有所差异,此博文将对遇到的问题逐一解决,不断更新内容。 2 安装 vue-router 官网:https://rou
一、创建一个Vite+Vue3+TS的项目 二、eslint配置 eslint中文官网:http://eslint.cn/ ESLint最初是由Nicholas C.Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的iavascript代码检测工具 2.1. 安装eslint pnpm i eslint -D 2.2. 生成配置文件:.eslint.cjs ...
开始配置之前:清空项目文件 一、路由基础配置 官网https://router.vuejs.org/zh/ 1.router/index.ts路由配置 importtype{App}from'vue'import{createRouter,createWebHistory}from'vue-router'importtype{RouteRecordRaw}from'vue-router'// 定义路由规则constroutes:RouteRecordRaw[]=[{path:'/',redirect:'/home...
二、打包分析 官网https://www.npmjs.com/package/rollup-plugin-visualizer 1. 安装 pnpm i rollup-plugin-visualizer-D 1. 2.vite.config.ts配置 import{visualizer}from'rollup-plugin-visualizer'// https://vitejs.dev/config/exportdefaultdefineConfig({// ...plugins:[// ...visualizer({open:true,/...
"dev": "vite --open", "build:test": "vue-tsc && vite build --mode test", "build:pro": "vue-tsc && vite build --mode production", "preview": "vite preview" }, 通过import.meta.env获取环境变量 五、SVG图标配置 在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后,页面上加载的不...