详解Vue项目编译后部署在非网站根目录的解决方案


Posted in Javascript onApril 26, 2018

同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录。

eg. :

vue-router: history模式 内网环境:192.168.1.1:8080/index.html 外网环境:domain.com/ttsd/index.html

由于开发出来的项目是要部署在客户方,且客户并不想单独拿一个域名(或子域)来部署,这时,打包后的程序就要作一些配置方面的修改了。

修改配置文件

1、把打包后的资源引用修改为相对路径 找到 config/index.jsbuild 属性下的 assetsPublicPath

build: {
 ...
 assetsPublicPath: './' // 未修改前的配置为 '/',
}

详解Vue项目编译后部署在非网站根目录的解决方案

2、修改样式引用的资源文件(图片、视频、字体文件等)为相对路径 找到 build/utils.js 中,添加(或修改) publicPath'../../'

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath: '../../' // 修改路径
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

详解Vue项目编译后部署在非网站根目录的解决方案 

修改路由

在路由的history模式下,所有的路由都是基于根路径的,如 /xxxx ,由于部署目录未知,所以我们可以根据 location.pathname 来获取到当前访问的文件路径,来修改路由。

vue-router里提供了一个base的属性

base类型: string 默认值: "/" 应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

修改路由代码

function getAbsolutePath () {
 let path = location.pathname
 return path.substring(0, path.lastIndexOf('/') + 1)
}

const routers = new Router({
 mode: 'history',
 base: getAbsolutePath(),
 ...
})

至此,打包配置的相关修改已全部完成,项目也能够正常访问。 但还是会有一个问题,跳转到某个路由后,刷新页面,就gg了,页面为空白,此时就要修改nginx的配置了。

修改nginx的配置

官方给的nginx配置是根目录下的,即 https://router.vuejs.org/zh-cn/essentials/history-mode.html#nginx

location / {
 try_files $uri $uri/ /index.html;

 // 需要修改为
 try_files $uri $uri/ /dist/index.html;
}

注: /dist 根据实际部署的网站目录,修改一下就可以。 个人感觉还可以通过nginx内置的指令去动态获取,在下就不太清楚了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
vue如何判断dom的class
Apr 26 #Javascript
vue 中filter的多种用法
Apr 26 #Javascript
vue自定义filters过滤器
Apr 26 #Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
Vue 使用中的小技巧
Apr 26 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php数组总结篇(一)
2008/09/30 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
numpy 声明空数组详解
2019/12/05 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
巴西购物网站:Submarino
2020/01/19 全球购物
结构和类有什么异同
2012/07/16 面试题
满月酒答谢词
2014/01/14 职场文书
师德先进个人材料
2014/12/20 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
如何写好开幕词?
2019/06/24 职场文书