3、 安装完成后,在项目根目录会出现.eslintrc.cjs文件 4、继续安装vite-plugin-eslint npm i -D vite-plugin-eslint 5、配置vite.config.ts文件 import { defineConfig } from 'vite'; import vue from'@vitejs/plugin-vue'; import eslintPlugin from'vite-plugin-eslint';//https://vitejs.dev/conf...
NODE_ENV ='production'VITE_APP_BASE_API='/prod-api' # 变量必须以 VITE_ 为前缀才能暴露给外部读取 NODE_ENV='test'VITE_APP_BASE_API='/test-api' 第三:package.json中配置运行命令 "scripts": {"dev":"vite --open","build:test":"vue-tsc && vite build --mode test","build:pro":"vue-...
环境文件(env)📂 Vite使用dotenv从环境文件目录中加载环境文件,默认情况下,环境文件目录为项目的根目录。可以在vite.config.ts中通过envDir属性指定环境文件目录。 指定环境文件目录📚 在项目根目录下创建目录env,用于存放所有的环境文件。在vite.config.ts中添加envDir属性指定环境文件目录为env:typescript export de...
vite+vue3模式的配置 import{defineConfig,loadEnv,ConfigEnv}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs/plugin-vue-jsx";import{resolve}from"path";// https://vitejs.dev/config/exportdefaultdefineConfig(({command,mode})=>{// Load env file based on `mode` in the ...
如下图最终返回一个本地地址,输入浏览器访问,能打开就没问题了(此处有提示Network:use–host to expose,该问题可在后面配置中解决,解决后再运行会多出几个局域网访问网址,这样只要和你在一个局域网的人都能通过地址访问你的页面了) (二)配置vite.config.ts ...
import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import*aspathfrom'path';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{// 配置别名 设置 `@` 指向 `src` 目录alias:[{find:'@',replacement:path.resolve('./src')// 或者// '@': path.resol...
一、安装vue-router yarn add vue-router 二、创建页面 项目目录下新建views文件夹,添加文件(home、login、test) image.png 三、创建router文件夹 3.1、在src下新建router文件夹,在router文件下创建index.ts和modules文件夹 image.png 3.2、在 modules 文件夹下创建模块化的 ts 文件,并填入对应的代码 ...
Vite+Vue3全家桶配置 一、构建Vite+Vue3 使用NPM构建 项目结构 运行项目 二、安装Vue Router 安装Vue Router 4.x版本 新建router/index.js文件 main.js引入 测试路由 三、安装Vuex 安装Vuex 4.x版本 新建store/index.js main.js引入 测试Vuex 四、安装less ...
配置路径别名 在vite.config.ts中导入path 飘红是因为TS找不到path模块的类型声明 安装@types/node,为node内置包添加TS类型声明 yarnadd -D@types/node或npmi -D@types/node 配置好vite.config.ts的结果如下: import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importpathfrom"path";// http...
使用Vite生成的项目结构如下图所示。可以发现，Vite生成的脚手架项目的目录结构与Vue CLI生成的项目目录结构很类似，确实是这样的，而且开发方式也基本相同。不过Vite项目的默认配置文件是vite.config.js，而不是vue.config.js。package.json文件的内容如下所示：{ "name": "hello","version": "0.0.0","scripts...