vite快速安装vue,及项目打包发布

原文地址:https://mp.weixin.qq.com/s/xdEqyhfmW8P0R_wktymb3w

vite快速安装vue,及项目打包发布

1.下载、安装VScode,下载地址:https://code.visualstudio.com/

2.下载、安装node.js,国内下载地址:http://www.nodejs.com.cn/

3.创建空文件夹,用VScode打开,在左侧空白处点击鼠标右键,选择在集成终端打开

图片

*通过在终端命令行输入npm -v获取到版本号,说明node.js安装成功,npm可以使用。

图片

4.输入命令:

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

5.安装vite成功后,输入:

 cd my-vue-app

yarn 安装vue

6.成功后,  输入:

yarn dev 服务端启动vue

7.ctrl+鼠标点击打开项目地址:http://localhost:5173/

图片

8.可以使用:

yarn run build 对项目进行打包

 

9.打包完的文件在dist目录下,注意:

1.有跨域保护,所以需要放到服务器下运行;

2.路径默认为服务器根目录,因此要添加相对路径。

图片

解决方法:

在vite.config.js文件内,添加:base:'./'

修改完成再次使用:yarn run build,对项目进行打包即可。

发布的文件在dist文件夹内,添加到服务器即可查看。

另外也可以在vite.config.js中

可以使用下面命令添加vite服务器和端口号

 server:{
 
   host:'localhost',
 
   port:3000,
 
  },

如图:

图片

可以通过配置的服务器以及端口号直接访问:

图片

posted @ 2024-02-20 14:41  lizhigang  阅读(316)  评论(0编辑  收藏  举报