当前位置 主页 > 服务器问题 > nginx问题汇总 >

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

栏目:nginx问题汇总 时间:2018-11-18 16:43

今天小编就为大家分享一篇解决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 打包发布去#和页面空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持IIS7站长之家。

缩小 缩小 缩小 缩小
IIS7整站下载工具 IIS7批量查询排名 IIS7远程桌面连接工具 iis7-iis网站批量管理 iis7批量替换工具 IIS7服务器专用下载工具 IIS7日志分析工具 IIS7批量PING,服务器批量添加网卡IP小工具 IIS7远程同步备份工具
IIS7网站监控 站群批量SEO查询 批量获取排名域名 批量关键词排名查询 模拟各种蜘蛛 批量友情链接监测 批量检测死链 搜索引擎大全 批量查询外链
批量查询网站标题 批量查询KeyWords 批量查询描述 批量查询网站IP 批量百度收录查询 批量查询百度日收录 批量查询百度周收录 批量查询百度月收录 批量查询360总收录 批量查询360日收录 批量查询网站年龄 批量查询360PC权重 批量查询爱站移动权重 批量查询站长移动权重 批量查询360移动权重 批量查询神马权重 批量查询谷歌PR 批量查询搜狗PR 批量查询百度反链 批量查询爱站首页反链 批量查询爱站内页反链 批量查询百度快照 批量查询搜狗快照 批量icp备案查询 批量网站ip地址查询 批量查询导出链接 批量查询百度V认证 批量查询百度安全 批量查询站长PC权重 批量查询爱站PC权重 批量查询搜狗总收录 站长资源大全 IIS7-cms大全 IIS7站群大全 IIS7虚拟空间大全 IIS7服务器大全 IIS7-VPS大全 服务器代购 站群专用 美国站群服务器 香港站群服务器 特供站群vps 亚洲服务器 菲律宾HS 韩国首尔 香港PCCW 香港沙田电信 香港PowerLine 日本多机房 新加坡多机房 韩国大带宽 香港新世界 香港Pangnet 台湾 美国服务器 加州RS 美国vps母鸡租用 洛杉矶MC 洛杉矶C3 特价促销区 洛杉矶NS 洛杉矶Cera高防 洛杉矶HS高防 SK高防 洛杉矶WX 加州RH 芝加哥AT VPS云主机 香港沙田电信 韩国首尔 香港Pangnet 新加坡SG 香港PL 洛杉矶SK 抗攻击 洛杉矶C3 日本大阪 洛杉矶Cera 抗攻击 洛杉矶MC 纽约 SSD 抗攻击 大容量备份VPS 国庆大促 俄罗斯