vue-cli3 本地预览打包代码

本地预览打包代码

serve

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

若配置了

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? '/my-vue-admin/' : "/"
};

将 dist 修改成 my-vue-admin,并运行serve命令

也可本地安装

http-server

1. 安装
   yarn add -D http-server

2. 配置 package.json scripts

"scripts": {
  "preview": "http-server ./ -P",
},

3. 打包产出
   yarn build

4. 修改文件名 dist===>my-vue-admin (与 publicPath 保持一致)

5. 本地预览(http://ip:port 可选, 为代理服务)
   yarn preview

6. 浏览器打开连接访问即可

也可全局安装