解决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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php字符串操作常见问题小结
2016/10/11 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
python如何在列表、字典中筛选数据
2018/03/19 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python实现停车管理系统
2018/11/30 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
类的核心特性有哪些
2014/01/01 面试题
优秀团队获奖感言
2014/02/19 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
白血病捐款倡议书
2014/05/14 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android