vue3-vite搭建、运行
原创
©著作权归作者所有:来自51CTO博客作者尔嵘bobo的原创作品,请联系作者获取转载授权,否则将追究法律责任
1.首先得保证你的电脑安装的node版本是12+的
2.输入以下命令自动化搭建vite-vue3项目
# npm 6.x
npm init vite@latest vue3-admin --template vue
# npm 7+, 需要额外的双横线:
npm init vite@latest vue3-admin -- --template vue
# yarn
yarn create vite vue3-admin --template vue
# pnpm
pnpm create vite vue3-admin -- --template vue
注意:我选择yarn搭建的,项目目录如下:
3.yarn 安装依赖
4.运行项目
5.运行效果:
6.vue.config.js配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 起个别名,在引用资源时,可以用‘@/资源路径’直接访问
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
//本地运行配置,及反向代理配置
server:{
//本地运行配置
host:"192.168.0.119", //设置ip,方便调试
port:8082, //vite项目启动时自定义端口
https: false, // 是否开启 https
open:true, //vite项目启动时自动打开浏览器
hmr:true, //开启热更新
cors: true, //默认启用并允许任何源
proxy: { // 设置反向代理,跨域
// 如果是 /apiUrl 打头,则访问地址如下
'/apiUrl': {
target: 'http://127.0.0.1:8990/', //代理接口
changeOrigin: true,
rewrite: path => path.replace(/^\/apiUrl/, '')
}
}
},
// 打包配置
build: {
target: 'modules',
outDir: 'dist', //指定输出路径
assetsDir: 'assets', // 指定生成静态资源的存放路径
minify: 'terser' // 混淆器,terser构建后文件体积更小
},
})