建站网站有哪些,简单旅游网站开发,中国建设工程造价管理系统网站,WordPress更换域名权重最近在学习vue3vite的内容#xff0c;发现vite和webpack类似#xff0c;下面将区别及使用方法做一下记录#xff1a;
1.vite添加环境配置文件
...
├── src
...
├── .env # 通用环境变量配置
├── .env.development …最近在学习vue3vite的内容发现vite和webpack类似下面将区别及使用方法做一下记录
1.vite添加环境配置文件
...
├── src
...
├── .env # 通用环境变量配置
├── .env.development # 开发环境变量配置
├── .env.test # 测试环境变量配置
├── .env.prod # 生产环境变量配置
...我这边的配置文件有以下几个 每个文件中的内容基本上都是一致的比较重要的是以下几个
VITE_BASE_URL接口地址
VITE_BASE_LOGIN获取登录token的接口一般与其他的接口地址会有所不同
VITE_PERMISSIONS_KEYadmin.permissions
VITE_USER_KEYadmin.user
NODE_ENVdevelopment.env文件是通用的配置文件如果在对应的环境文件中没有找到对应的参数则会主动去.env文件中去查找。
2.package.json中的内容 scripts: {serve: vite,api: node service/index.js,build: vue-tsc --noEmit vite build,build:test: vue-tsc --noEmit vite build --mode test,}本地运行npm run serve 打测试包npm run build:test 打正式包npm run build
3.打包后的文件 此时如果直接点击index.html文件 此时需要通过开启本地服务才能正确的预览文件
4.方法一通过http-server运行
安装http-server
npm i -g http-server启动HTTP服务 在dist目录下打开命令行工具 (cmd) 执行命令
http-server如果你此时终端默认的地址是在dist外层则此时可以指定运行的文件夹
http-server dist此时默认的端口号是8080 如果需要指定端口号则需要使用下面的命令
http-server -p 4200 dist此时终端会显示下面的内容则表示运行成功。 此时在浏览器中打开http://localhost:4200即可因为127.0.0.1即localhost。
5.方法二通过express运行
首先需要在dist目录下安装 express 依赖
npm i express然后在dist文件夹中新建一个server.js的文件内容如下
import express from express;
var app express();
const hostname localhost; // 这里填写要访问资源的机器IP地址例如192.168.2.101
const port 4200;
app.use(express.static(./));
app.listen(port, hostname, () {console.log(Server is running, biu biu biu);
});然后打开dist目录的命令行工具执行 node server 命令即可以在浏览器中访问页面了。
比如上面的代码则需要在浏览器中打开http://localhost:4200即可。
运行后的界面如下
