你好,欢迎访问我的博客!登录
当前位置:首页 - 服务器问题 - 正文 SEO教程学习网

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

2019-02-25服务器问题seo学习网106°c
A+ A-
今天小编就为大家分享一篇解决vue 打包发布去#和页面空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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 打包发布去#和页面空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持SEO学习网。

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

今天小编就为大家分享一篇解决vue 打包发布去#和页面空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiT相关推荐: 解决Nginx出现 403 Forbidden的办法nginx+uWsgi配置问题的解决Nginx下解决无法使用中文URL的方法解决Nginx上传大文件超时的办法nginx服务器怎麼解决API的跨域问题?Nginx如何解决WebApi跨域二次请求以及Vue单页面的问题?nginx怎么配置多个vue项目?深入探讨:Nginx 502 Bad Gateway错误的解决方法vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕在nginx上部署vue项目(history模式)的方法nginx提示:500 Internal Server Error错误的解决方法nginx调用php-fpm出错解决方法和nginx配置详解Nginx PHP-Fcgi中因PHP执行时间导致504 Gateway Timeout错误解决Nginx 502 bad gateway和Nginx 504 Gateway Time-out错误解决方vue项目打包部署详解Nginx 出现 403 Forbidden 的解决办法vue填坑之webpack run build 静态资源找不到的解决方法nginx配置多个vue项目 ======================================================================================================网站被劫持检测、网站监控站群批量SEO查询六大搜索引擎 模拟蜘蛛批量替换工具 - 多行批量替换服务器专用下载工具iis日志分析工具批量PING,服务器批量添加网卡IP小工具远程同步备份工具整站下载工具批量远程桌面连接工具iis网站批量管理
  选择分享方式
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录