解决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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
详解JavaScript对象的深浅复制
Mar 30 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
js Proxy的原理详解
May 25 Javascript
微信小程序实现轮播图指示器
Jun 25 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实现递归循环每一个目录
2010/08/08 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python素数检测实例分析
2015/06/15 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
解决python运行效率不高的问题
2020/07/20 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
小学二年级学生评语
2014/04/21 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
团代会邀请函
2015/02/02 职场文书
老公婚前保证书
2015/02/28 职场文书
自荐信格式模板
2015/03/27 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL