1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处  assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen ; location / { # vue h5 history mode 时配置 tr

<html> <head> <title>Vue实现二级菜单的显示与隐藏</title> <script src="vue.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ background

原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }

router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template></template>中,在加入<router-view></router-view> <template> <div> ....... <router-view></router-view> </div> <

你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> .pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;} </styl

本人在开始学习vue的过程中,虽然比较容易上手,还是碰到了很多坑,比如我今天要说的VUE的部署问题.我在部署vue的过程中发现自己在开发环境中,页面什么都可以跑起来,但是npm dev build后发现好多问题就出来了,比如图片的路径问题,访问的路径问题. 1.图片路径问题:个人觉的把所有的静态图片可以放入static文件夹下面,本身这个文件夹我们在搭vue脚手架的时候就已经生成了,从这个名称就可以知道它改存放那些资源.对于静态资源应用的方式我是这样处理的,在webpack.base.conf文

在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在webpack中 他会被当成一个字符串来处理,并不会转换为图片的路径 <img src="src"/> export default { name: 'index', data () { return { imgsrc2: '

具体描述:vue项目,npm run build时点击路由切换,第一次点击没问题,再点不会切换报错如下图 原因分析:vue-router配置路由,当代码分割和懒加载时,由于webpack配置不当,导致懒加载chunk时相对路径出现混乱从而加载chunk失败.-----路径配置如下图 以上路由配置,举例systemManage说明报错点 编译之后,路径分别为 /system/auth /system/role /system/menu /system/group 切换到任何其他目录均报错,无法查看

一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.config.js(config—>index.js)文件里设置: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.res

首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖  static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析.

一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发现通过require了路径之后可以正常显示. 但是这样感觉还是不太好,因为我不想声明怎么多变量.于是就成了这样: 先把图片通过import导入,前面的../../直接改成 @ 就可以了,然后就可以通过上面图片这样的设置来显示了. 如果是要动态的话可以在方法里面通过this点属性来修改它:

CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script> <!--引入UI组件库(1.0版本) --> <script src="//webapi.amap.com/ui/1.0/main.js"></script> 配置externals 文件路径 bu

最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1.找到 config->index.js里面,如下修改 2.找到 build->utils.js,在里面加入一句publicPath:'../../', 配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用 1.图片资源放在 assets->img文件夹下

当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value=

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="js/vue.js"></script></head><body><div id="vm1"><big

1.首先,一级要有change改变事件的关键字,v-on:change="selectarr($event)" 这是created(){}函数里面的自动调用一级分类的数据 html代码 2.二级需要有一级的id才可以获取到二级子分类的数据 html代码

安装配置 Alertmanager wget https://github.com/prometheus/alertmanager/releases/download/v0.20.0/alertmanager-0.20.0.linux-amd64.tar.gz tar -zxv -f alertmanager-0.20.0.linux-amd64.tar.gz -C /usr/local cd /usr/local mv alertmanager-0.20.0.linux-amd64/ aler

1.nginx 设置 location /promethues/ { proxy_pass http://10.xx.xxx.55:9090/prometheus/; } 2.设置prometheus子路径 在启动的时候根据命令行的参数来进行子路径设置. ./prometheus --web.external-url=prometheus --config.file=prometheus.yml

文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目标 2.前端知识体系 2.1 前端三要素 HTML(结构):决定网页结构和内容 CSS(表现):设定网页的表现样式 JavaScript(行为):控制网页行为.(浏览器解释执行) 2.2.MVVM 是一种软件架构设计模式. MVVM的核心是ViewModel,负责转换Model中的数据对象来让数据变

<el-table :data="leftPage.datas" style="width: 100%"  @selection-change="handleSelectionChange1">                                             <el-table-column type="selection"  width="55"></