首先声明这是基于vue2.x的 1. 将其中build的配置项assetsPublicPath进行修改,改为上图-->目的是将资源文件的引入路径,改为相对地址(相对index.html) 2.html中的js.css.img引入均没有问题, 但是css中的background-image还是报404 此时的问题原因是,使用了相对地址后,在css进行引入的图片路径,其相对的是css文件的路径 此时的修改方法是,修改build文件夹中的utils.js文件,增加一行代码搞定

目前利用Maven工具来构建自己的项目已比较常见.今天主要不是介绍Maven工具,而是当你本地启动这样的服务时,如果遇到报错,该如何解决?下面只是参考的解决方案,具体的解法还是得看log的信息. 1.log提示: SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoaderListenerjava.lang.ClassNotFoundException:

最近在学习IDEA,由于之前一直使用的是Eclipse,所以初次接触IDEA就接触到了不少的坑,其中最让人头疼的大概就是如何让IDEA顺利的启动起来了,这方面我就不细讲了,网上已经有了不少的教程,稍后我也会给大家一个IDEA的学习附件,有兴趣的朋友可以看看,今天主要谈的就是如何解决IDEA项目在启动时报404的问题,相信不少像我一样初次接触IDEA的朋友都掉进过这个坑,今天就带大家了解一下这个坑,以及如何解决. 首先,我们来看一下404这个页面: 从这个图片我们其实能看出一点点端倪,注意最后一句

原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的. 这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了,希望可以对新手或者复习相关知识的朋友有用. 原文发表于我的技术博客 Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader autoprefixer --save-dev 2.在根目录新建一个postcss.config.js文件 module.exports = { plugins: [ require('autoprefixer') ] } 这就是对postCSS一个简单的配置,引入了autoprefixer插件.让pos

1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引入到入口文件,这里我们引入到entry.js中 import css from './css/index.css'; 3.在终端安装 cnpm i style-loader --save-dev cnpm i css-loader --save-dev 4.安装好后,我们开始在webpack.con

1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div>来放置图片 3.设置图片的css #pic{ background-image: url(../images/pic.png); width:60px;height:60px; } 4.编写完成后,进行打包,这时候会报错,先不要慌,这是因为缺少file-loader和url-loader 5.安装fil

1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpack-plugin"); 3.配置 new extractTextPlugin('/css/index.css') module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-l

1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loader --save-dev 2.在module中配置 { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" , { loader: "less-loader&q

1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass-loader --save-dev 2.配置 { test: /\.scss/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }] } 3.新建一个sass文件,编写div 4

使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用.在webpack.config.js文件头部引入glob.引入purifycss-webpack 3.配置 new PruifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'src/*.html'))/

本地启动activemq时,报错.可以看到是5672端口被占用.在网上查了各种资料,有说是杀掉进程的,有说是禁用Internet Connection Sharing (ICS)服务的,楼主试了都没生效. 干脆直接在conf/avtivemq.xml配置文件中找到<transportConnector name="amqp" uri="amqp://0.0.0.0:5672?maximumConnections=1000&wireFormat.maxFrameS

我们一般都通过Eclipse进行tomcat的本地调试,但有些特殊情况下需要直接本地启动tomcat(进入tomcat的bin目录下执行startup.bat),此时我们可以利用类似远程调试模式的方式来进行debug. 首先需要在bin/catalina.bat里加入远程调试的环境变量设置,这里我们把调试端口号设为18080 set JPDA_OPTS=-agentlib:jdwp=transport=dt_socket,server=y,suspend=y,address=localhost:

webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导入是不推荐的:而现在我们学了webpack,我们希望的是通过打包bundle.js文件,将所有的依赖文件全部导入进去. 我们要知道的是,如果在入口函数main.js文件中如果没有导入css文件,那么打包的bundle.js文件必然不会有css文件,所有我们需要让main.js文件依赖css文件. 使

项目下载 项目地址:https://github.com/apache/dubbo-admin 如下图,使用git地址直接构建或者下载zip包构建源码都可以,我用的是下载的zip包, 项目架构说明 dubbo-admin-distribution:用于存放一些项目配置相关.如果不定制自己的类容,我们不用去动它.dubbo-admin-server:用作后端微服务.我们本地启动时,主要是修改它的配置文件dubbo-admin-ui:用于页面渲染显示.需要修改一下index.js文件. dubbo-

一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要引入到入口文件,这里我们引入到index.js中 import css from './css/index.css'; document.write("It works."); 3.在终端安装style-loader和css-loader 4.安装好后,我们开始在webpack.confi

之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到:目前用webpack4开发项目时,同样遇到类似的问题:所以就借此机会探讨一下产生问题的原因. 问题产生原因 webpack3项目场景复现 项目webpack有关css的配置伪码如下: output: { // 项目编译输出路径 path: path.resolve(__dirname, 'dist

问题描述: 本地启了两个服务:A(http://localhost:8001) B(http://localhost:8000),A 项目要怎么才能关联到 B 项目,也就是 A 项目请求怎么跳到 B 项目? 解决方法: 用一个代理软件,监听一个端口,把不同的 URL 转发给不同的后端. 1.用 nginx ,配置最方便.(暂时不会,先不展开叙述) 2. webpack-dev-server.随便写一个 webpack 配置文件,不用干什么实际的活,在 dev-server 里配置一下 proxy

在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法. 1.首先在终端安装http. npm i http-server -g.(g全局安装) 安装成功之后 2.cd到需要查看的页面的文件夹处(该文件夹必须是包含js.css等所有文件的文件夹) 例如:必须是memberPage这个文件夹(cd memberPage/) 3.可以看一下server下的命令都有什么 http-server -h 常用的就是-c其他不做过多

设置Tomcat的路径,启动Tomcat,先测试一下环境,在浏览器中输入http://127.0.0.1:8080/ 提示 404找不到网页.出现这种问题然后试了一下,tomcat在外面直接启动  然后输入http://127.0.0.1:8080/ 测试,发现没问题.怀疑应该是哪里没有设置好,后来网上查找原来配置好tomcat后需要更改一下Tomcat的Server Locations的默认设置.步骤如下: 就是将Server Locations的选项值由默认值 "Use workspace

当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself 我的安装顺序如下: 1:npm install webpack -g (安装webpack全局命令环境,相当于装了一个软件:当然前提是装了nodeJS,因为webpack是运行在nodeJS之上的) 检测是否安装成功:webpack --version 2:npm init -y(创建packag