VueCLI5.X版本构建项目(打包)本地打开报错

sunddy_x

已于 2022-05-25 16:13:25 修改

阅读量898

点赞数

分类专栏： Vue CLI 文章标签： vue.js vscode 前端

于 2022-05-25 13:53:39 首次发布

本文链接：https://blog.csdn.net/sunddy_x/article/details/124964399

版权

Vue CLI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

报错截图：
在这里插入图片描述
报错分析：

跨源请求只支持协议方案:http, data, chrome, chrome-extension, chrome-untrusted, https。

解决方案：

1、把项目部署到服务器
2、在vscode安装插件Live Server

在这里插入图片描述
在html文件右键打开：

其他：在vue-cli5之前的版本中，打包项目是可以本地打开的，只要在vue.config.js 中配置 publicPath 选项，但是在vue-cli5中无效。查看了打包文件后，发现vue-cli5打包的index.html中使用了 ES Module ：
在这里插入图片描述

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <link rel="icon" href="favicon.ico">
  <title>construct-zp</title>
  <script defer="defer" type="module" src="static/js/chunk-vendors.be7cdae2.js"></script>
  <script defer="defer" type="module" src="static/js/app.1d00b639.js"></script>
  <link href="static/css/chunk-vendors.3dcf1cd1.css" rel="stylesheet">
  <link href="static/css/app.9e5a03a7.css" rel="stylesheet">
  <script defer="defer" src="static/js/chunk-vendors-legacy.e1baa594.js" nomodule></script>
  <script defer="defer" src="static/js/app-legacy.b9d309ea.js" nomodule></script>
</head>

<body><noscript><strong>We're sorry but construct-zp doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong></noscript>
  <div id="app"></div>
</body>

</html>

就是 type="module" 的两个script导致的问题

sunddy_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
VueCLI5.X版本构建项目(打包)本地打开报错

报错截图：报错分析：跨源请求只支持协议方案:http, data, chrome, chrome-extension, chrome-untrusted, https。解决方案：1、把项目部署到服务器2、在vscode安装插件Live Server在html文件右键打开：其他：在vue-cli5之前的版本中，打包项目是可以本地打开的，只要在vue.config.js 中配置 publicPath 选项，但是在vue-cli5中无效。查看了打包文件后，发现vue-cli5打包的in
复制链接

扫一扫