vue-cli 打包使用history模式的后端配置实例

apache的配置

这是windows下的

在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置

# Virtual Hosts
#
<VirtualHost *:80>
ServerName localhost
DocumentRoot D:/wamp64/www/huanzuan/dist
<Directory "D:/wamp64/www/huanzuan/dist">
Options Indexes FollowSymLinks
   AllowOverride All
   Order allow,deny
   Allow from all
</Directory>
</VirtualHost>

然后再 index.html文件的同级路径下 创建.htaccess文件

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

内容就是官方文档给的 一点都不用改

然后确保 config/index.js中的build下的

assetsPublicPath: '/',是绝对路径就可以了

以上这篇vue-cli 打包使用history模式的后端配置实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • nginx部署访问vue-cli搭建的项目的方法

    nginx部署访问vue-cli搭建的项目的方法

    从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀.使用hash模式构建的项目打包后,我只需要使用webstorm之类的软件打开访问就能成功了. 但是我用history模式构建的项目需要借助后台技术,我这里选用的是nginx反向代理来部署项目.具体做法如下: 1.创建后台服务器 对象 upstream mixVueServer{ server baidu.com;#这里是自己服务器域名 } 2

  • 解决vue-cli项目打包出现空白页和路径错误的问题

    vue-cli项目打包: 1. 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPub

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • 详解如何将 Vue-cli 改造成支持多页面的 history 模式

    标题可能描述不准确, 大概就是这么个需求: 用 Vue-cli 搭建一个多入口, 多页面的站点, 也就是通过html-webpack-plugin插件会生成多个 .html 文件, 在默认下, 是只有 index.html 这个入口可以用 history 模式, 如: http://www.xxx.com/xxx/xxx, 而其他的入口只能用 hash 模式, 如: http://www.xxx.com/admin.html#/xxx/xxx, 因为webpack-dev-middleware会

  • vue-cli 打包使用history模式的后端配置实例

    apache的配置 这是windows下的 在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置 # Virtual Hosts # <VirtualHost *:80> ServerName localhost DocumentRoot D:/wamp64/www/huanzuan/dist <Directory "D:/wamp64/www/huanzuan/dist"> Options Indexes FollowSy

  • vue cli使用融云实现聊天功能的实例代码

    先看下vue-cli的使用 1:安装node 2:npm i vue-cli -g npm install --global vue-cli 3:vue list 可以查看模板 4:选择一个模板,初始化项目,例如vue init webpack myPro 5:cd myPro  进入项目根目录 6:npm install    安装依赖 7:npm run dev   运行项目 正文开始 公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹

  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

  • 详解如何去除vue项目中的#——History模式

    详解如何去除vue项目中的#——History模式

    使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:   这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申到

  • vue-cli在 history模式下的配置详解

    背景:自己搭了vue测试项目,使用的是history模式,放在后台,一开始进入项目没什么问,但是再一刷新页面就404了,what?当时的比较懵逼,为啥呢?因为之前写过项目上线过是好用的啊,这个项目按照那个写的啊,但是解压项目zip文件之后发现,WEB-INF没有引入,瞬间就WC了,为了以防自己犯这种SX的问题浪费时间,所以打算记录下history的配置 1.配置router/index.js 2.build/utils.js 3.webpack.prod.conf.js,这里配置因为我们的应用是

  • VUE的history模式下除了index外其他路由404报错解决办法

    我们先来看下代码: location / { index index.html; root /dist; try_files $uri $uri/ /index.html; } try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配. 然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展: 问题背景: vue-router 默认是hash

  • Vue路由history模式解决404问题的几种方法

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/c

  • Vue中如何把hash模式改为history模式

    Vue中如何把hash模式改为history模式

    目录 把hash模式改为history模式 关于路由hash和history模式 hash模式 history 模式 二者对比 把hash模式改为history模式 如上图所示非常简单 只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了 关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后

  • vue-router如何实现history模式配置

    vue-router如何实现history模式配置

    目录 vue-router history模式配置 一:概述 二.实现history模式需要怎样配置 mode:“history“的作用 vue-router history模式配置 一:概述 vue-router可以设置两种模式:hash和history const router = new VueRouter({ mode: "hash", // mode: "history", routes }); 如果使用hash模式,一般无需特殊配置: 但如果要使用his

随机推荐