webpack打包vue项目之后生成的dist文件本地运行

本地测试打包文件

努力搬砖的阿一

3020人浏览 · 2022-03-14 10:00:12

努力搬砖的阿一 · 2022-03-14 10:00:12 发布

背景

每次项目修改后想要测试一下线上地址有没有问题都需要重新打包然后部署，使用第三方直接本地启动测试

项目打包

npm run build

命令会默认在vue项目的根目录下生成打包后的dist文件。

我们可以看到在dist目录下有一个index.html文件，我们直接在浏览器中打开是不能正常展示我们的项目效果的，这时候就需要我们安装一个http容器，让他在这个容器中执行。我们采用的是serve

安装serve

npm install serve --save
yarn add serve

项目启动

安装成功后，在终端输入serve dist,看到下图所示表示启动成功

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^