解决vue-cli3 使用子目录部署问题


Posted in Javascript onJuly 19, 2018

在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码:

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
}

但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

网上找了很多,并没有找到答案。后来发现 vue-router 是用了 history 模式,但是 nginx 并没有添加相应的配置便会出现这个问题。所以,如下解决方案:

1.变更生产环境配置,使得支持 history 模式。这里只需要修改 nginx 的配置,把 404 指向 index.html 即可。
2.不在使用history模式

总结

以上所述是小编给大家介绍的vue-cli3 使用子目录部署问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jquery ui对话框实例代码
May 10 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
js实现弹窗效果
Aug 09 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 #Javascript
微信小程序实现分享到朋友圈功能
Jul 19 #Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
You might like
实用函数9
2007/11/08 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
popdiv
2006/07/14 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
在小程序开发中使用npm的方法
2018/10/17 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python flask中静态文件的管理方法
2018/03/20 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python底层封装实现方法详解
2020/01/22 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
上课玩手机的检讨书
2014/10/01 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
停课通知书
2015/04/24 职场文书
经费申请报告
2015/05/15 职场文书
迎国庆主题班会
2015/08/17 职场文书