vite创建项目
- cmd 输入命令行
npm init @vitejs/app- 输入项目名称
- 选择创建方式及创建内容
- 切换到创建项目文件夹
- 安装依赖
npm install 或npm i- 创建完成
- 用vscode打开指令
code .相关配置内容
"scripts": {
"dev": "vite --open",//--open 启动完成后自动打开浏览器
"build": "vite build",
"preview": "vite preview --open"//--open 启动完成后自动打开浏览器
}vite配置 base: 基础路径配置,打包后静态资源路径为相对路径
base:'./',//默认为"/"alias：长地址用简短字符代替
"comp":resolve(__dirname,"src/assets/images/"),//组件存放位置文件夹
"/images":"./src/assets/images"//静态资源路径使用相对地址，地址'./xxx/xxx'，否则开发模式会报错build打包 terserOptions生产环境移除console.log
build: {
minify: 'terser',//必须配置为terser,否则terserOptions不起作用
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
}
}rollupOptions：打包输出文件夹的配置
rollupOptions:{
output: {
chunkFileNames: 'js/[name]-[hash].js', //入口文件：文件名+hash值格式
entryFileNames: 'js/[name]-[hash].js', //出口文件：文件名+hash值格式
assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件：以后缀为文件夹名称，文件名+hash值格式
}
}mock.js 随机生成数据
server proxy跨域代理
server: {
proxy: {
'^/ss': {
target: 'xxx',//跨域网址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/ss/, ''),
},
},
},开发环境及生产环境变量替换 .env.development 文件---开发环境
VITE_BASE_API="".env.production 文件---生产环境
VITE_BASE_API=""全局安装 npm-check-updates
$ npm install -g npm-check-updates在当前项目的目录下执行以下命令，查看所有存在的更新
$ ncu也可以通过执行以下命令查看所有可用的相关命令行 (命令变动或者无效时查看命令)
$ ncu -h更新包
$ ncu -u忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题，以npm v3-v6的方式去继续执行安装操作
npm install --legacy-peer-deps