vue路径上如何设置指定的前缀

目录
  • vue路径上设置指定的前缀
    • 解决
  • vue history模式、前缀
    • 路由history模式
    • 路由前缀

vue路径上设置指定的前缀

有时在使用项目的时候，我们都需要指定一个前缀路径（就像tomcat中的虚拟路径），这个时候在vue中如何使用呢。

解决

这个时候我们可以使用vue-router中的base这个属性，使用这个属性就可以在路径前面添加指定的前缀。

export default new Router({
  mode: 'history', //后端支持可开
  # base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

这个时候的访问路径是： http://127.0.0.1:8080/login.

当我们使用vue-router的base属性的时候。

export default new Router({
  mode: 'history', //后端支持可开
  base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

这个时候的访问路径是： http://127.0.0.1:8080/wtlicence/login

vue history模式、前缀

路由history模式

router/index.js

mode: 'history',
base: '/sss', // 路由前缀

路由前缀

config/index.js

开发dev和线上build配置中，将static改成想要的前缀。

  • assetsSubDirectory: 打包后的静态资源要存放的路径（static）

最后，改成history模式后部署， 刷新会有问题。需要更改服务器配置（config)

server{
	listen      8888;
	server_name  localhost;
	root html
	location / {
	    try_files $uri $uri/ @router;
	    index index.html index.htm;
	}
	location @router {
		rewrite ^.*$ /index.html last;
	}
}

新增的主要是：

location / {
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 51: …l index.htm; }̲ location @rou… /index.html last;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli2打包前和打包后的css前缀不一致的问题解决

    啰嗦一哈 最近基于vue-cli2 学习webpack,将vue-cli2的webpack配置强撸了一遍,感觉身体已被掏空...但还是收获不少的,起码掌握了webpack的一些基本套路.开发环境和生产环境的概念.根据不同的环境写不同的webpack配置.和一些常用插件的用法等. 问题来了 基于vue-cli不用自己配置webpack开撸项目是十分爽的,但当我在撸得正爽的时候发现一个问题,就是项目打包前和打包后的css前缀不一致的,如下(浏览器:Chrome): --给app.vue下的img添加

  • vue 接口请求地址前缀本地开发和线上开发设置方式

    开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/pr

  • Vue在外部配置打包文件夹名称和url地址前缀

    Vue在外部配置打包文件夹名称和url地址前缀

    在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p

  • vue路径上如何设置指定的前缀

    vue路径上如何设置指定的前缀

    目录 vue路径上设置指定的前缀 解决 vue history模式.前缀 路由history模式 路由前缀 vue路径上设置指定的前缀 有时在使用项目的时候,我们都需要指定一个前缀路径(就像tomcat中的虚拟路径),这个时候在vue中如何使用呢. 解决 这个时候我们可以使用vue-router中的base这个属性,使用这个属性就可以在路径前面添加指定的前缀. export default new Router({   mode: 'history', //后端支持可开   # base: '/

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • Java在指定路径上创建文件提示不存在解决方法

    如果 d:\upload\file\ 文件夹不存在,会报错 String strPath = "d:\\upload\\file\\2.mp3"; File file = new File(strPath); if(!file.exists())){ file.createNewFile(); } 以下会创建文件夹 d:\\upload\\file\\2.mp3\ String strPath = "d:\\upload\\file\\2.mp3"; File fi

  • vue+springboot上传文件、图片、视频及回显到前端详解

    目录 效果图 设计逻辑 数据库表 前端vue html js代码 前端思路 储存文件信息 上传文件对象 后端上传下载代码 完整代码 workinfo.vue SubmitHomeworkController 总结 效果图 预览: 设计逻辑 数据库表 前端vue html <div class="right-pannel"> <div class="data-box"> <!--上传的作业--> <div style=&quo

  • Java Struts图片上传至指定文件夹并显示图片功能

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="multipart/form-data",表示提交的数据时二进制的 并且必须是method="post" <%@ page language="java" contentType="text/html; charset=utf-8" page

  • springboot整合vue实现上传下载文件

    springboot整合vue实现上传下载文件

    springboot整合vue实现上传下载文件,供大家参考,具体内容如下 环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件 设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l

  • vue打包上传服务器刷新404问题的两种方案

    vue打包上传服务器刷新404问题的两种方案

    一:nginx服务器解决方案,修改   .conf  配置文件 有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach

  • vue 实现上传组件

    1.介绍 效果如下图 2.思路 文件上传的两种实现方式 1.From形式 <form method="post" enctype="multipart/from-data" action="api/upload" > <input type="file name="file"> <button type="submit">Submit</button>

  • 利用nodeJS+vue图片上传实现更新头像的过程

    利用nodeJS+vue图片上传实现更新头像的过程

    目录 思路: 1.前端准备 2.node后端服务 总结 思路: 前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像. 1.前端准备 前端采用vue的el-upload组件,具体用法见官方API.使用代码如下 <!--头像上传--> <el-upload class="avatar-uploader" action="ht

随机推荐