Vite的安装，启动和端口配置

Vite的安装，启动和端口配置

Vite的安装

选择一个文件夹输入cmd

此处我选择的是D:\VueStudy

进入终端后输入官网（https://cn.vitejs.dev/guide/）指定命令

此处我使用yarn安装Vite命令

yarn create vite my-vue-app --template vue

**注意：**此处my-vue-app是官网帮你起的名字，可自行修改

启动Vite

按照上面提示命令，挨个执行即可

随即得到Vite给我们生成的一个端口号

把其复制到浏览器中

这样就说明我们的Vite搭建完成

更改Vite端口号

打开我们的vite.config.js 配置文件

添加

 // 配置前端服务地址和端口
  server: {
    host: '0.0.0.0',
    port: 8080,
    // 是否开启 https
    https: false,
  },

成品如下所示

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置前端服务地址和端口
  server: {
    host: '0.0.0.0',
    port: 8080,
    // 是否开启 https
    https: false,
  },
})

随即你就会发现刚刚打开的cmd也更改了地址，刚刚的端口失效，新端口可用

当然网络端口也是可以打开的

IDEA配置启动

每次都输入命令启动比较麻烦，我们在IDEA中配置一下

选择Edit Configurations

选择npm

在Scripts中填入dev

选择OK然后启动就可以了