本地查看打包后的html文件

运行打包项目

需要开启服务运行
使用http-server 运行（如没有安装http-server的，使用node 全局安装 http-server 即可，npm install http-server -g）
cd dist
http-server

vue-cli3打包之后的文件为何不能本地打开

vue-cli提供了一个入口让你能配置修改webpack.

在根目录下新建一个vue.config.js文件, 然后在其中修改publicPath这个选项:

vue.config.js:

module.exports = {
    publicPath: './'
}

将这个选项设置为'/'(当前文件夹).

现在你就可以本地打开dist文件夹中的index.html了.

但是会有一个小问题, 就是如果你使用了vue-router(路由)的话, 会发现路由跳转有问题了.

这个路径明显不对呀...

原来是因为我的vue-router的模式设置成了history模式:

src/router/index.js:

...
const routes = [
  ...
]
...
export default new Router({
    mode: 'history',
    routes
})

只要把mode改为hash就可以正常跳转了(其实默认是这个模式的, 但如果你的项目中mode被改了你得知道是这个问题).

参考来源于：https://www.jianshu.com/p/8bfcae1ddc90