详解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 相关文章推荐
优化Jquery,提升网页加载速度
Nov 14 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
详解vue 数据传递的方法
Apr 19 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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
Protoss兵种对照表
2020/03/14 星际争霸
简单的PHP图片上传程序
2008/03/27 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python三元运算实现方法
2015/01/12 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
科研先进个人典型材料
2014/01/31 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
大学生就业自荐书
2014/06/16 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Python List remove()实例用法详解
2021/08/02 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS