Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't

亦凉 2023-10-10 04:21 11阅读 0赞

### ***vue-cli项目打包报错*** ###

Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won't work.

### ***报错原因*** ###

因为`vue-cli`的默认配置中, `publishPath`是用绝对目录, 所以`dist`文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在`npm run build`完成之后执行以下命令: `npm install -g http-server`

### ***解决方案*** ###

**1、打开config文件夹下面的index.js**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]**

**2、把assetsPublicPath:'/'改成assetsPublicPath:'./'**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]**

**3、这个时候再执行npm run build命令**

**4、你会发现还是一样的错误；但是现在的这个错误不是错误；**

***我之前也纠结这个，查询了很多资料，发现这个是正常的现象！***

**5、我的控制台虽然还是这个错误，但是我用浏览器打开dist文件夹下面的index.html，却可以打开**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924112039890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190924113536890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190924113731354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70