详解Vue项目部署遇到的问题及解决方案
写在前面
Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。
- hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端不会产生什么影响，改变 URL 不会重载页面。
- history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，来完成 URL 跳转而无须重新加载页面。（需要特定浏览器支持）
hash 和 history 两种模式都是基于浏览器自身的属性，vue-router 只是利用了这两个特性（底层还是浏览器提供的接口）来实现前端路由。
使用场景
一般来说，两种模式都是可以的。除非在意不太漂亮的 #，只能选择 history。
这两种模式在开发环境下都没有什么太大的问题，但是当部署到生产环境中后，两者有所不同。
hash 模式部署没有什么问题，只要访问到服务器上的 index.html，就可以访问网站了。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少对 /user/id 的路由处理，将返回 404 错误。
不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。- Vue-Router
问题起因
在做「年度账单」项目的时候，项目部署的时候，用的是 hash 模式。APP安卓端分享出去的链接对于 # 做了特殊处理，encode 转义成了 %23，所以路由只能换成 history 的模式。
因此，现把解决的思路总结下，虽然 官网 上给出了解决方案，但在实际的编码中也遇到了一些问题。
根目录下
当项目在根目录下部署的时候（如 http://www.example.com/）,vue 的相关文件默认不需要修改，修改的是后端，这里以 nginx 为例。
location / {
try_files $uri $uri/ /index.html;
}
$uri 就是访问的 url，不包含 域名 和 querystring。例如 /test/hello 当访问 $uri 时，如果存在，则访问 $uri/, 不存在就访问 /index.html 这样配置好，访问 http://example.com/ 时就可以访问到网站了，进入多级目录后刷新页面也不会存在问题。
子级目录下
这里涉及到修改 vue 项目几个配置文件。
先定义几个环境
- 部署的域名：http://www.example.com:8080/
- nginx 的 root 目录：home/web/
- vue 的部署路径：home/web/h5-year-bill/
- vue 项目的链接：http://www.example/h5-year-bill/
- vue 项目的静态资源路径：http://www.example/h5-year-bill/static/
1. 打包后的静态资源路径需要修改
找到 build/config/index.js，代码如下：
...
build: {
...
- assetsPublicPath
// 访问路径，修改成绝对路径
+ assetsPublicPath: '/h5-year-bill/'
}
2. 路由文件
Vue-Router 有一个 base 属性, 传送门
base
类型: string
默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"
因此，找到 src/router/index.js，代码如下：
// 不影响本地开发，兼容性做了处理
const isHistoryMode = process.env.NODE_ENV === 'production' ? {
mode: 'history',
base: '/h5-year-bill/'
} : {
mode: 'hash'
};
const router = new Router({
...isHistoryMode,
routes
});
至此，打包配置的相关修改已全部完成，项目也能够正常访问。
但还是会有一个问题，跳转到某个路由后，刷新页面，就会出现页面空白，或者路由不通，此时就要修改 nginx 的配置了。
3. nginx 配置相关修改
nginx部署路径/conf/nginx.conf，修改如下：
#h5-year-bill
location ^~ /h5-year-bill {
root /home/web;
index index.html;
try_files $uri $uri/ /h5-year-bill/index.html last;
}
/h5-year-bill/ 就是部署的网站目录。
这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue-cli history模式实现tomcat部署报404的解决方式
vue-cli开发过程中路由#不好看,去掉可使用history模式,开发模式路径访问都没问题,部署到服务器之后访问路径时报404,这种情况需要配置服务器默认访问路径index.html.官网只提供了apache.nginx的配置方式,没有tomcat的配置方式,下面以个例子来完成整个配置. 范例:vue-cli项目使用路由,tomcat作为服务器,项目文件夹名myvue 1.npm run build 打包生成的build文件夹中内容拷贝到myvue文件夹如下图: 2.myvue文件夹下新建WE
-
vue项目部署上线遇到的问题及解决方法
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会
-
Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d
-
解决Vue在Tomcat8下部署页面不加载的问题
最新的项目刚刚用上Vue,遇到很多问题,在Tomcat下部署时出现了页面空白. 问题:路由 mode history 模式在 dev 模式下没有问题,在 build 模式页面空白,但静态资源能正常引用 原因:部署在Tomcat上时并没有在根目录上,而是放置在了子文件夹下面,router 无法找到路径中的组件,所以也就无法渲染了 解决:修改 router 下 index.js 以上这篇解决Vue在Tomcat8下部署页面不加载的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多
-
详解Vue项目部署遇到的问题及解决方案
写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()
-
详解vue项目打包后通过百度的BAE发布到网上的流程
经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己
-
详解Vue项目的打包方式(生成dist文件)
目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static
-
详解Vue项目引入CreateJS的方法（亲测可用）
1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS
-
详解vue或uni-app的跨域问题解决方案
常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author
-
详解Maven项目Dependencies常见报错及解决方案
个人最近项目中所遇到的问题,记录下便自己和同样遇到问题的小伙伴提供一个参考. 通常Maven里报红波浪线的常见问题 ①可能是子工程没有继承父工程 注意父工程中有中对应的module: <groupId>com.fred.parent</groupId> <artifactId>mall</artifactId> <version>1.0-SNAPSHOT</version> <modules> <module>
-
详解vue配置请求多个服务端解决方案
一.解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /bryant 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/bryant': { target: 'http://localhost:8081, ws: true, changeOrigin: true, pathRewrite: { '^/bryant': '/bryant' } }, /
-
详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl
-
详解Vue项目中实现锚点定位
背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q
-
详解vue项目打包步骤
终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下: 1.查看package.js文件的scripts命令 2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件 3.其中dev是开发环境,build是构建版本,找到build下面的assetsPu