解决vue 打包发布去#和页面空白的问题


Posted in Javascript onSeptember 04, 2018

1.vue项目中config文件下index.js中打包配置

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../yiTownWebApp/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../yiTownWebApp'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要

 /**
 * Source Maps
 */

 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',

 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],

 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

2.路由配置:router文件夹下index.js

export default new Router({
 mode: 'history',//去掉#,
 base: '/yiTownWebApp/',//这个配置也很重要,否则会出现页面空白情况
 scrollBehavior: () => ({ y: 0 }),
 routes: [
 {
 path: '/article',
 name: 'article',
 component: article
 },
 {
 path: '/footMark',
 name: 'FootMark',
 component: FootMark
 },
 {
 path: '/shareFootMark',
 name: 'ShareFootMark',
 component: ShareFootMark
 }
 ]
})

nginx配置:

server {
 listen 8080;
 server_name localhost;
 #charset koi8-r;

 #access_log logs/host.access.log main;
 #打包后的项目目录,一定记住这个地方带有项目名称
 root /Users/a123/Desktop/vue/sgAdmin/yiTownWebApp;
 index index.html;

 location /yiTownWebApp{
  #这个地方没有项目名称,因为请求的时候如果请求:http://localhost:8080/yiTownWebApp,nginx会查找/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp/目录下的数据
  root /Users/a123/Desktop/vue/sgAdmin;
  try_files $uri $uri/ @router;
  index index.html;
 }
 //try_files $uri $uri/ @router;和下边部分很重要,没有这部分发布二级一下的路由会出现js加载,但是也没空白的情况
 location @router {
  rewrite ^.*$ /index.html last;
 }
 }

以上这篇解决vue 打包发布去#和页面空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js与applet相互调用的方法
Jun 22 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
layui select动态添加option的实例
Mar 07 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 #Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 #Javascript
ES6中let 和 const 的新特性
Sep 03 #Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 #Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 #Javascript
前后端如何实现登录token拦截校验详解
Sep 03 #Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 #Javascript
You might like
深入php list()函数的详解
2013/06/05 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
分分钟入门python语言
2018/03/20 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
类的核心特性有哪些
2014/01/01 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
编辑求职信样本
2013/12/16 职场文书
广告学毕业生求职信
2014/01/30 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
2015年暑假工作总结
2015/07/13 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
python关于集合的知识案例详解
2021/05/30 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android