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,
},
如图:
可以通过配置的服务器以及端口号直接访问: