解决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 面向对象编程 function也是类
Sep 17 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
JS 5种遍历对象的方式
Jun 16 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 数据库树的遍历方法
2009/02/06 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
smarty简单应用实例
2015/11/03 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python修改FTP服务器上的文件名
2019/09/11 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
个性大学生自我评价
2013/12/04 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
环保建议书范文
2015/09/14 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers