vue 打包部署去掉#注意事项

示例基于vue cli2.0脚手架生成的项目

1.vue项目中config文件下index.js中打包配置：

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/dist/', // 这个地方使用绝对路径 很重要！/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#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-pluginproductionGzip: 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 offbundleAnalyzerReport: process.env.npm_config_report
}

2.路由配置：router文件夹下index.js：

export default new Router({mode: 'history', // 去掉#，需要路由模式改为historybase: '/dist/', // 这个配置也很重要，否则会出现页面空白情况scrollBehavior: () => ({ y: 0 }),routes: [{path: '/facebook',name: 'Facebook',component: Facebook},{path: '/google',name: 'Google',component: Google}]
})

3.剩下的不懂就要找你得运维或者后端开发小伙伴了，nginx配置：

 server {listen 8080;server_name localhost;#charset koi8-r;#access_log  logs/host.access.log  main;#打包后的项目目录，一定记住这个地方带有项目名称root /Users/qiilee/Desktop/vue/dist;index index.html;location /dist {#这个地方没有项目名称，因为请求的时候如果请求：http://localhost:8080/dist ,nginx会查找/Users/qiilee/Desktop/vue/dist/目录下的数据root /Users/qiilee/Desktop/vue;try_files $uri $uri/ @router;index index.html;}//try_files $uri $uri/ @router;和下边部分很重要，没有这部分发布二级一下的路由会出现js加载，但是也没空白的情况location @router {rewrite ^.*$ /index.html last;}}

vue 打包部署去掉#注意事项相关推荐

vue 打包部署在 nginx服务中，以及出现的一些问题
首先来说操作步骤前提: 1.你已经安装/下载好 nginx 2.你的vue 项目已经打包完成,并得到了 dist 文件夹部署开始: 1.vue 项目打包,在控制台输入 npm run build ...
vue打包放到java中启动_Springboot+Vue打包部署总结
文章目录一.Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目二.Springboot打包+部署 1.打包(mvn clean package) ...
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...
Vue打包部署到Tomcat
Vue打包部署到Tomcat 一,在config-->index.js中,设置build更改 assetsPublicPath: '/'为assetsPublicPath: './' modu ...
Vue打包部署IIS无法请求
ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开第二步,点击 Server Proxy Settings 第三步,选中应用 Vue打包部署配置URL重写规则 ...
Vue打包部署到服务器-找不到静态资源404错误
Vue打包部署到服务器-找不到静态资源404错误参考:https://blog.csdn.net/AnnaF/article/details/105709569 问题描述在本地运行正常,但是使用n ...
vue打包部署服务器，背景图片显示空白
vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...
SpringBoot + Vue打包部署到本地和远程服务器
最近碰到有人问如何将SpringBoot和Vue进行打包部署到Tomcat服务器,由于Vue接触不是很久所以我自己也感兴趣是如何打包部署到本地或者远程服务器上(云端).恰好手上也有一个案例需要部署到远 ...
Vue打包部署出现白屏
1.问题描述我们用vue项目在本地跑的时候一切正常,当时我们用npm run build命令打包并部署服务器后,发现Index展示的是白屏,控制台显示资源都能正确访问到 2.原因出现这个问题的 ...

vue 打包部署去掉#注意事项

vue 打包部署去掉#注意事项相关推荐

最新文章

热门文章