使用Vue-cli打包，dist目录内的index.html文件双击使用浏览器打开报错

Question

我就想用这种双击使用浏览器打开的方式来访问，不想通过http-server的方式来访问，怎么配置webpack才行呢？

Answer 1

在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项 publicPath: './'

Answer 2

最好通过http-server之类的静态server来运行，web开发中的很多内容为了和上线后的一致性，通常建议在开发阶段也使用一个debug server来做。

但如果你非想要改改，我个人认为修改根目录下的config.js文件，找到里面的assetsPublicPath字段，其值改成空字符：''。

因为不确定你都做了什么，所以不敢保证能用。而且也不建议什么“双击打开”

Answer 3

// 安装 serve
npm install -g serve

// 运行 dist 目录中的项目
serve -s dist

// 根据输入提示进行浏览器访问

输出示例

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:5000       │
   │   - On Your Network:  http://<your-ip>:5000       │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

Answer 4

首先dist文件夹下面的内容是需要直接放到服务器上面的，直接双击在本地打开肯定会报错；
如果需要查看打包后的页面效果，需要搭建一个本地的服务，然后再打开。
我一般会采用nodejs写一个简单的server，然后再打开。

1.新建 server.js 放入dist文件夹中
2.server.js的代码如下

var express = require('express');
var app = express();
const hostname = 'localhost';
const port = 3000;
app.use(express.static('./'));
app.listen(port, hostname, () => {
    console.log('Server running at http://${hostname}:${port}');
});

之后在dist文件夹下运行

npm install express --save-dev
node server

直接打开浏览器访问“localhost:3000”就能查看打包完成之后的页面效果了。

Answer 5

我也想这么做，毕竟看到dist文件夹下的内容很想网上下的网页模板。然后报错跟楼主一样。然后看错误是路径问题。于是把dist文件夹下的内容放D盘根目录，双击打开了。
如果想放文件夹下，估计需要什么配置，像楼上说的那样。