默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config->index.js 这时再打包,页面能看到了,但是好多引用的文件路径不对. 然后再修改build->utils.js ,加上publicPath:'../../' 再打包,就好了

问题描述: 一.更新依赖,并打包项目 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.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: (1).修改config文件夹下的index.js文件下的build对象下如下(修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'): (2).修改build文件夹下的utils.js文件如下(需添加 publicPath:'../../'): 示例:(1

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

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+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法:webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(wo

最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直接打开index.html页面是空白的,还会报几个错,找不到页面路径. 原因:找到config文件下index.js,全局搜索assetsPublicPath,结果是 assetsPublicPath:' / ' 默认为根目录,而index.html和static是在同一级目录下,因此,解决方法就是

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>打开该

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

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

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

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

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

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

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

vue cli创建项目在 webpack.prod.conf.js文件 //打包时清除页面中所有打印及debugger断点 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true } })

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

项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些没有转成base64的背景图都失效了,,路径. 处理方法: 使用require引入图片 img标签 <img :src="require('assets/img/header/search.png')"> 背景图 <div :style="{background

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 只有这么多 这样打包就是这

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