vue cli webpack-simple打包上传至github

最新推荐文章于 2021-09-16 16:43:21 发布
最新推荐文章于 2021-09-16 16:43:21 发布
阅读量351 收藏
点赞数
文章标签： javascript webpack 后端 ViewUI
原文链接：https://juejin.im/post/5b0c0a04518825154542230a
版权

首先要做到是你的github已经创建了github的个人网站，不会的话请百度、Google等。 今天主要内容是

webpack-simple简单模板打包后上传至github预览：

我们还用vue-cil的webpack-simple模板，当写完打包的时候 生成的打包文件在dist文件夹下
但是只生成了build.js和build.js.map两个文件

如果将sourceMap设置为false将只生成build.js文件 打包之前如果你用vue-router了 请将
路由的模式采用默认的hash模式 因为history模式需要后端配合才能使用

打包后

你需要将

index.html 复制到dist文件夹内此时文件夹内有

这个文件夹就是你需要上传的文件 当然在本地点击index文件 出来的页面什么都没有 在本地预览需要设置一些东西 我刚学配置不会 流下了没技术的泪水！！！！

上传至github个人主页仓库 刚开始输入网址进入内容样式都会加载但是引用的图片一个没有

按f12看到没有图片 所以就需要你把本地的图片安装提示错误的路径上传到github仓库内

之后就可以输入链接进入预览了 预览链接

参考

参考文章

转载于:https://juejin.im/post/5b0c0a04518825154542230a

weixin_34211761
关注
node+vue+webpack(webpack-simple)+mysql使用历程之二（node服务端环境搭建）
marslover521的博客
08-07 598
参考以下连接安装vue前端项目： https://blog.csdn.net/marslover521/article/details/80938686 dos窗口下测试vue项目是否正常运行： npm run dev 运行结果为： 搭建node服务端 在构建项目没有报错的前提下执行以下操作来搭建node服务端： 在项目根目录下创建server文件夹，同时在server文...
vue-cli · Failed to download repo vuejs-templates/webpack-simple: connect ECONNREFUSED 12.0.0.1:443
Mahai_kita的博客
06-13 1357
vue-cli · Failed to download repo vuejs-templates/webpack-simple: connect ECONNREFUSED 12.0.0.1:443 关于vue无法初始化创建项目解决方案 出现了一个问题。 vue-cli · Failed to download repo vuejs-templates/webpack-simple: connect ECONNREFUSED 解决方法： 从网上查看了很多的方法，试过都不管用，github的网址和IP可以pi
vue-cli webpack-simple 模板 打包上线浏览
明天的明天5812
09-06 780
一、首先用vue-cli 生成一个webpack-simple模板的项目，名为webpack-simple-demo 1、 vue init webpack-simple webpack-simple-demo 2、进入到项目里面 cd webpack-simple-demo 3、加载项目所需要的模块 npm install 4、启动项目...
node、webpack-simple、vue、Ubuntu相关项目部署
marslover521的博客
02-15 426
通过webpack-simple初始化的项目怎样部署到ubuntu服务器上？ 首先在本地将项目开发好，后台node部分正常运行，前后端联调成功。 1、moba连接Ubuntu服务器 2、确定Ubuntu服务器上已经有项目中所需要的mysql数据库 3、通过moba将server文件夹内的node文件复制在所需项目文件夹内 4、再将通过npm run build生成的dist文件复制到项目文件的根目...
使用vue-webpack-simple模板
weixin_30248399的博客
08-08 193
开发步骤 1、下载node 2、下载webpack npm install webpack -g 3、安装脚手架 npm install vue-cli -g 4、根据模板创建项目 simple 完全没用 webpack-sim...
学习webpack系列之一 ---- （手动部署环境）
LizequaNNN的博客
09-16 323
学习webpack系列之一 ---- （手动部署环境） 一、创建以及初始化项目 mkdir webpack-simple-project cd webpack-simple-project npm init -y npm install webpack webpack-cli 安装webpack以及webpack-cli脚手架工具，生成package.json文件，如果是npm5以上还有package-lock.json。 值得一提的是，根据官方文档，这个package-lock.json 是在 npm
cli dll打包 vue_webpack进阶——DllPlugin优化打包性能（基于vue-cli）
weixin_39636164的博客
12-29 292
本文主要介绍两个插件：DllPlugin和DllReferencePlugin，后者配合前者使用。Github地址：dll-test介绍：打包会输出一个类dll包(dll包源于windows的动态链接库)，这些代码本身不会执行，主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行...
vue init失败简单解决方法(终极版)
11-29
// 报错：vue-cli · Failed to download repo vuejs-templates/webpack-simple: unable to verify the first certificate //简单一点，你也可以直接去github下载对应的模板(template), 然后windows+r,cmd, vue ...
vue-cli 的 vue init webpack my-project 报错处理
liger123x的博客
04-13 3778
之前我安装好vue-cli之后开始执行 出现以上错误vue init webpack my-project网上查了一下有人说是需要翻墙 ，更改下hosts就可以了  https://blog.csdn.net/oscar92420aaa/article/details/53386471,但是我这边还是不行 所以只能改另一种方法做暂时性处理 1.下载模板在https://github.com/vue...
Failed to download repo vuejs-templates/webpack-simple
最新发布
01-20
根据提供的引用内容，出现"Failed to download repo vuejs-templates/webpack-simple"错误的原因是无法验证第一个证书。解决这个问题的方法有两种： 1. 直接下载模板：你可以直接从GitHub上下载对应的模板，然后在...
vue基础17（vue-cli脚手架安装和webpack-simple模板项目生成）
weixin_44110923的博客
05-14 266
vue-cli脚手架安装和webpack-simple模板项目生成 　　ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是：https://github.com/vuejs/vue-cli 　　 详情点击下面链接查看： https://www.cnblogs.com/L5251/articles/9086740.html ...
关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程（自用）
weixin_42283462的博客
06-04 2720
1、vue-cil构建项目：官网的介绍vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。我们不需要知道它究竟是什么，只需要知道它是一个工具帮助我们辅助开发，而我们所要做的就是安装上它，来方便我们的开发。下面，我们来用vue-cil构建一个项目。首先，我们在终端中把当前目录定位到你准备存放项目的地方。即自己定义的一个目录下面我们首先需要安装vue-cil。我...
【vue】webpack 和 webpack-simple依赖包迁移注意事项
当白的技术小窝 ( git : https://github.com/canwhite )
09-26 759
bogon:~ ericzhang$ vue list   Available official templates:   ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.   ★  browserify-simple - A simpl...
vue-cli+webpack-simple创建项目访问后台（跨域问题解决）
siriva的博客
10-10 1613
在网上找了很多都是webpack在config目录下的index.js里面代码，这里总结了一个webpack-simple跨域的问题，在webpack.config.js的devServer中配置： devServer：{ port: 8080,//自己项目的端口 host: 'localhost',//自己项目的地址 proxy: { '/api/*': ...
使用webpack-simple封装简单组件
qq_35876316的博客
06-09 794
$ npm install -g vue-cli $ vue init webpack-simple my-project $ cd my-project $ npm install 安装countup.js $ npm install countup.js $ npm run dev 启动项目之后按照 countup.js 官方 demo 初始化插件 app.vue <template> <span ref='countup'></span> &lt.
VUE-CLI webpack 项目打包部署上线
weixin_34082177的博客
10-28 548
很简单不复杂只需要几步1、找到项目的 webpack环境配置的config目录下的index.js文件的assetsPublicPath把"/"改成 "./"得出： build: { env: require('./prod.env'), index: path.resolve(dirname, '../dist/index.html'), ...
webpack打包之后的文件过大的解决方法
热门推荐
胖猫的博客
01-30 1万+
以前一直使用create-react-app这个脚手架进行react开发，后面因为一些自定义的配置，转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理webpack打包之后文件太大的情况，简单记录下来。 首先配置全局变量 首先，通过指定环境，告诉webpack我们当前处于production环境中，要按照p
webpack 打包基本（复杂的）
qq_41537416的博客
10-30 161
第一步，安装 vue-cli 全局安装 cnpm i webpack webpack-cli webpack-dev-server -g   cnpm i vue-cli -g vue-cli有三个版本，分别为 simple 简单的 webpack webpack版本 复杂的’ webpack-simple 中和  教程 vue init webpack webpack  ...
VUE知识day3_vue-cli脚手架安装和webpack模板项目生成
05-23 209
ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是：https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后，可以在命令行工具中输入node -v和npm -v,如果能显示出版本号，就说明安装成功。 二、安装vue-cli 安装好no...
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: script-ext-html-webpack-plugin@2.1.5 npm ERR! Found: webpack@5.88.1 npm ERR! node_modules/webpack npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1 npm ERR! node_modules/@soda/friendly-errors-webpack-plugin npm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.4.6 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"4.4.6" from the root project npm ERR! 4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm ERR! peer webpack@">=4.0.0" from @vue/preload-webpack-plugin@1.1.2 npm ERR! node_modules/@vue/preload-webpack-plugin npm ERR! @vue/preload-webpack-plugin@"^1.1.0" from @vue/cli-service@4.4.6 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"4.4.6" from the root project npm ERR! 4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm ERR! 10 more (babel-loader, compression-webpack-plugin, ...)
07-15
根据您提供的错误日志，看起来是由于依赖项的版本冲突导致的问题。在您的项目中，`script-ext-html-webpack-plugin` 需要 `webpack` 的版本在 4.0.0 或 5.0.0 之间，但是在您的环境中安装的是 `webpack@5.88.1`。 解决这个问题的方法有两种： 1. 更新依赖项：尝试更新 `script-ext-html-webpack-plugin` 的版本，使其与您已经安装的 `webpack@5.88.1` 兼容。您可以查看 `package.json` 文件中的依赖项列表，并将 `script-ext-html-webpack-plugin` 的版本范围调整为兼容 `webpack@5.88.1` 的版本。 2. 降级 webpack 版本：如果您的项目中的其他依赖项要求使用较旧版本的 webpack，可以尝试将 webpack 的版本降级到兼容的版本。您可以运行以下命令来安装指定版本的 webpack： ```bash npm install webpack@4.x.x --save-dev ``` 请将 `4.x.x` 替换为符合您项目需要的 webpack 版本。 如果以上方法仍然无法解决问题，请提供更多的错误信息和上下文，以便我能够更好地帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值