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

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

报错截图:

报错分析:

跨源请求只支持协议方案: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-zptitle>
  <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导致的问题

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320532.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存