一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run build进行打包,这个时候你直接打开dist/下的index.html,会发现文件可以打开,但是所有的js,css,img等路径有…

发布项目 cmd  命令行 npm run build      执行打包文件 完成后就会有  3 个文件夹    分别是: 文件夹 :build     config      dist    index.html 打包上传   会有几个问题   就是 1.文件路径问题 2.图片路径问题 还有  带代码本身的问题 解决办法  修改配置文件 https://blog.csdn.net/qq_36838191/article/details/80817858 这样就可以出来了  不会再是空白页面了…

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引…

vue项目的打包 更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./” build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPubli…

vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上.   如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线   先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提…

vue项目如何不分离发布 1.首先yarn build 我用了vue-cli脚手架,bulid后的dist文件夹里的index.html有加版本号,那么为什么需要加版本号呢? a.回滚 b.解决浏览器缓存的问题 2.我们使用apache或者nginx帮助我们 2a.apache 这里我用的是XAMPP 1>把apache打开(我这里是点击start) 2>点击后青青草原绿 3>etc文件下的->http.conf文件(不同人电脑这个文件的路径好像不一样,自行查找) 4>打开该…

一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 url 构成:http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace 如上的 url 由以下部分组成:协议.域名.文件名称.get参数.锚点 1.http:// 规定了页面采用的协议. 2.www.feng…

我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器 在…

这是本系列的第三篇文章,前两篇我们讲了qt的安装和编译,今天我们讲一讲程序的打包. 好像我们现在都没怎么讲到qt的使用,因为想要放开手脚写代码,一些基础是要打牢的. 不过请放心,下一篇文章开始我们就会真正进入正题了. 这是针对使用qtdeploy时的打包教程,不适用于使用qt-tools + go build进行构建的情况. 打包 首先我们做一些打包前的准备工作,没错,做事之前先做好准备是个好习惯:-p. 这次用于打包的仍然是一个小例子,将一张图片缩小一半显示出来,这个例子正好需要使用外部资源,…

第一部分 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在真是服务器上的效果,然而又不可能始终在真实的服务器上运行,所以在本地服务器上运行就很重要了. 但是通过vue+webpack构建的项目如何部署到服务器上呢? 首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访…

vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如seajs(考虑中) ,按需引入 3. 如果还有很大的依赖,相对独立的包,不打包进项目,采用CDN . 如:UI 很大, 可以采用  CDN 方式加载, 减小服务器的压力, 同时还可以缩短客户端的等待时间…

vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:"./" 背景图片的引用问题 上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/ima…

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了一下,发现可能是optimize-css-assets-webpack-plugin这个插件的问题,导致打包时这个属性和注释混在了一起(个人猜测),其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图: 也就是说在使用“-webkit-box-orient: vertical;”需要这…

1.编写pom文件如下: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-release-plugin</artifactId> <version>2.4.1</version> </plugin> <plugin> <groupId>…

Eclipse打包发布项目 打包项目 首先需要将项目编译的文件删除,执行[Run As]->[Maven clean] 如果这个时候项目报错,在pom.xml文件中添加以下代码过滤掉单元测试 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <version>2.20.1</…

当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 先来描述一下期间遇到的问题有哪些: 打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 打包好的静态资源均是绝对路径,无法引入进项目,也是 404. 1.项目目录结构 这是打包后的,所以有 dist 文件夹,打包方式:npm run b…

Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- 如果没有安装npm,请先安装npm和node,这部分小伙伴们请自行百度或者查看本博客的node专栏查看node+npm的安装配置- 有些时候,可能需要在前面加上sudo,因为全局安装的指令有可能会因为没有权限导致安装失败,like this: Step2 使用cd指令,进入一个你想存放vue项目的…

1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https://blog.csdn.net/u014440483/article/details/87267160 步骤: 1,搭建node环境,此处省略 2,使用官方vue-cli脚手架 1,安装vue-cli npm install -g @vue/cli 2,使用用vue-cli vue create he…

1,打包 1.1首先你会在本地编辑好你的代码, 1.2然后在控制台输入 npm run build npm run build 1.3稍等片刻就打包完毕 2,位置 2.1打包完毕之后会在项目中生成一个dist文件,里面有一个html文件还有一个static文件里面就是各种js css 2.2右键你的项目上面 找到Show Explorer 这个就是打开你项目文件夹的方法 2.3进入文件就看到了dist,点击进入 看到了一个static文件夹还有一个index.html 只有这么多 这样打包就是这…

# template 模版项目 > A Vue.js project* 构建过程* 安装过程* 差异点* 打包优化 ## 构建过程```bashbogon:vue-cli caoke$ vue init webpack template ? Project name template? Project description A Vue.js project? Author caoke <caoke@caoke.com>? Vue build standalone? Install vu…

问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test;npm run build 二.发布Tomcat mv ../dist/* $tomcatpath/webapps/ROOT 三.第一次访问请求正常,刷新页面报404错误 怎么解决: 如果 URL 匹配不到任何静态资源,则应该返回同一个 app 依赖的index.html 页面. 在ROOT根目录下…

1. 项目结构   2. 代码说明 a. Dockerfile docker 构建的 FROM openjdk:8-jre-alpine WORKDIR /appdemo/ COPY build/distributions/ratpackdemo.zip /appdemo RUN unzip /appdemo/ratpackdemo.zip EXPOSE 5050 ENTRYPOINT [ "./ratpackdemo/bin/ratpackdemo"] b. build.gradle…

vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/xx.png, 我们希望改为 https://oss.xx.com/img/xx.png 思路: 了解到 publicPath 可以修改项目内静态文件的引用路径, 尝试这样修改 module.exports = { .. publicPath:'https://oss.xx.com/img' ..…

一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二个使用 .Vue 文件开发.(推荐使用第二个) 6.是否使用 vue-router vue-router 用于构建单页网页.(推荐使用) 7.是否使用ESlint规范代码 规范代码使代码更整洁好看.(推荐使用) 8.规范类型 推荐使用标准 9.测试相关 暂不使用(不会用) 10.初始化完成 二.安装…

从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入,然后就可以全局使用. 具体的方法如下: 1.在项目中找到static文件夹,在里面创建一个配置文件,起名为config.js ┌── build ├── config ├── node_modules ├── src ├── static │ ├── config.js // 配置文…

第一步:需要安装nodeJS的环境,直接去官网下载https://nodejs.org/en/,下载下来按照提示一步步的安装.(vue.js是一个Js 框架.在node里面通过Npm 安装,是为了方便进行模块化管理.) 安装完成后在cmd中输入:node –v,可检测安装的nodejs版本,如下图 第二步:基于nodejs,利用淘宝镜像安装相关依赖(我们这里使用国内的淘宝镜像) 在命令行中输入:npm install -g cnpm --registry=https://registry.npm…

概述 当我们用QT写好了一个软件,要把你的程序分享出去的时候,不可能把编译的目录拷贝给别人去运行.编译好的程序应该是一个主程序,加一些资源文件,再加一些动态链接库,高大上一些的还可以做一个安装文件. QT开发的程序发布的时候经常采用两种方式: 静态编译:可生成单一的可执行文件 动态编译:需同时附上需要的dll文件. 发布准备 设置程序图标 主窗口图标:主要在程序运行时显示在主窗口左上角,或在任务栏上显示. 运行程序图标:一般在桌面或文件夹中显示的缩略图标,可以点击后运行程序. 设置主窗口图标 (…

1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about…

首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢慢摸索之后发现了解决方法,其实很简单,只需把config下的index.js的assetsPublicPath配置成你项目的根目录路径就行了,例如: 图片也能正常访问了. 网上还看到说把图片都放到static下的,我试了下也是要配置assetsPublicPath成根目录的不然还是报错. 转自:ht…

我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件,我们通过学习webpack就能够了解其构建过程,然而从vue-cli 3.0开始,vue-cli命令行更改为@vue/cli以及@vue/cli-service等,他封装了webpack,使得我们很难清晰了解到底发生了什么.这时我们可能希望通过调试vue-cli-service对应build过程对其工作原理有一个大体的认知.下面记录一下这个调试过程: 1. 在git bash命令行中执行: $ node --inspect…