Vue - vue init webpack project 报错处理(无限downloading template),或者说一直卡着不动

1-问题描述:当我们直接用vue init webpack demo 脚手架创建项目时,直接无限downloading template),或者说一直卡着不动,等了一会报错vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188.59:443

解决方法:
  1. 方法一:(设置代理地址)我的就是这么解决的
    直接修改系统的hosts文件,文件地址:C:\Windows\System32\drivers\etc 看是否是默认配置。默认配置如下:
    # Copyright (c) 1993-2009 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    #      102.54.94.97     rhino.acme.com          # source server
    #       38.25.63.10     x.acme.com              # x client host
    # localhost name resolution is handled within DNS itself.
    #   127.0.0.1       localhost
    #   ::1             localhost
    #192.30.253.112 github.com
    #151.101.88.249 github.global.ssl.fastly.net
    
    注意:(一定要以管理员的身份打开,或者保存的时候以管理员的身份保存,切记,否则修改不成功)
    • 你的hosts文件直接鼠标右键用记事本打开,或者VSCode、Nodepad++打开,在里面添加以下代理地址:
    #192.30.253.112 github.com
    #151.101.88.249 github.global.ssl.fastly.net
    
    1. 或者直接把上面我的复制到新建txt,直接改后缀名为hosts文件

  1. 方法二:
    可能是webpack版本问题,要重新安装webpack
    npm uninstall -g webapck
    npm install -g webapck
    
  2. 方法三:
    如果方法一、二解决不了,检查三个环境问题(可能又是版本问题)
    1. node -v(查看node版本)
    2. vue -v (没有显示版本,直接npm i vue-cli -g)
    3. webpack-v(需要重新安装,npm install webpack -g)
  • 当你以上命令都安装过,并且显示版本号时,vue init webpack demo脚手架创建项目,一直没有反应,可能时node版本的问题
  • 所以直接node官网下载更新node.js覆盖版本就可以了、

2-以上方法大概足够解决报错的问题了,那么接下来谈一谈hosts文件

2.1-Hosts文件是什么
  • Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定。
  • 可以用文本文件打开!当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,浏览器会立即打开对应网页,如果没有找到,则浏览器会将网址提交DNS服务器进行IP地址解析。这也是提高快速打开网页的方法!
2.2-Hosts文件位置在哪里?

c:\windows\system32\drivers\etc,注意这个文件一定是在系统盘,如果你的系统在D盘请自行修改前面的盘符。如下图所示

在这里插入图片描述
快速进入hosts文件夹的方法。同时按下Win+R组合键,调出运行栏,在运行文本框输入c:\windows\system32\drivers\etc,点击确定按钮,如下图所示

在这里插入图片描述
具体修改方法上面说了,希望大家可以拜托这个卡死的BUG

### 将Vue.js项目导出或转换为纯HTML #### Vue项目的打包过程 当开发完成一个Vue应用之后,可以通过Webpack等构建工具将其编译成静态资源文件。这些静态资源可以部署到任何Web服务器上作为独立网页访问[^1]。 对于希望将整个Vue单页应用程序(SPA)转化为一系列静态HTML页面的情况,通常会采用预渲染(pre-rendering)技术来实现这一目标。这允许搜索引擎更好地索引网站内容,并减少首次加载时间。 #### 预渲染解决方案 一种常见的做法是利用 `prerender-spa-plugin` 插件配合 Webpack 构建流程来进行预渲染操作。该插件可以在构建过程中抓取指定路由并生成对应的 HTML 文件: ```javascript const PrerenderSpaPlugin = require('prerender-spa-plugin'); // ... new PrerenderSpaPlugin( path.join(__dirname, 'dist'), ['/', '/about', '/contact'] ); ``` 另一种方式则是借助第三方服务如 Netlify 或 Vercel 提供的内置功能自动处理SPA的应用程序转静态站点的过程。 #### 手动创建静态版本 如果只是想简单地把当前视图保存下来,则可以直接获取DOM结构并通过Blob API 创建下载链接,类似于给定的例子中的方法[^2]: ```javascript function exportHtml() { const htmlContent = document.querySelector('#app').innerHTML; var blob = new Blob([htmlContent], {type : 'text/html'}); // Create an anchor element and set its href attribute to the URL of our newly created file. let link = document.createElement("a"); link.href = URL.createObjectURL(blob); // Set desired filename here: link.download = "exported-page.html"; // Programmatically trigger click event on the generated <a> tag so that it starts downloading immediately after creation. link.click(); // Clean up by revoking object URL once download has started successfully. setTimeout(() => URL.revokeObjectURL(link.href), 0); } ``` 此代码片段展示了如何捕获特定区域内的HTML内容并提供给用户作为一个可下载项。 #### 导出JSON数据至本地存储 除了直接导出HTML外,有时也需要连同动态生成的数据一起保存。此时可以考虑使用像FileSaver这样的库辅助完成这项工作[^3]: ```bash npm install file-saver --save ``` 接着就可以很方便地调用其API以JSON格式保存数据了: ```javascript import { saveAs } from 'file-saver'; let jsonData = JSON.stringify(this.someDataToExport); var blob = new Blob([jsonData], { type: "application/json;charset=utf-8" }); saveAs(blob, "data.json"); ``` 以上就是几种不同场景下将Vue项目导出为HTML或其他形式静态资源的方式介绍。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值