Vue打包后如何在本地进行测试(附解决浏览器刷新无法访问的问题)

一、如何打包

打开Vue项目工程目录,然后终端下面命令,随后系统自动进行打包,然后会在项目目录里面生成一个dist文件夹,打包后的工程文件

npm run build

Vue打包后如何在本地进行测试(附解决浏览器刷新无法访问的问题)_第1张图片

二、进行本地测试 

我们在部署到nginx服务器之前如果想要本地进行测试的话,我们一般会选择工具模拟生产环境的行为,本人这里主要推荐使用serve在本地模拟生产环境,其支持 SPA(单页应用)的路由重定向,可以很好地模拟 Nginx 的行为。

1、首先安装serve

npm install -g serve

Vue打包后如何在本地进行测试(附解决浏览器刷新无法访问的问题)_第2张图片2、随后在全局启动serve (此步骤如果不配置-s全局启动可能会导致第一次可以访问页面,但是刷新浏览器后会出现页面无法访问的问题)

serve -s dist

Vue打包后如何在本地进行测试(附解决浏览器刷新无法访问的问题)_第3张图片

你可能感兴趣的:(前端,vue.js,前端,javascript,前端框架)