详解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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
js图片查看器插件用法示例
Jun 22 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
js停止输出代码
2008/07/20 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python argparser的具体使用
2019/11/10 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python实现双人五子棋(终端版)
2020/12/30 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
weblogic面试题
2016/03/07 面试题
个人公开承诺书
2014/03/28 职场文书
中秋晚会活动方案
2014/08/31 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2014年党总支工作总结
2014/12/18 职场文书
小学班主任心得体会
2016/01/07 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android