vue项目使用history模式打包应该注意的地方

1.在config/index.js中将assetsPublicPath原来的’/‘修改为‘./’。

build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'statics',
assetsPublicPath: '/',

2.在nigx服务器上的操作

  1.

 

server
{
##在server下添加或在location里面添加以下代码
location /
{
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=$1 last;
break;
}
}
## 如果访问的不是根目录用下面方式设置 qiancheng是我的子目录
   location /qiancheng{
　　　　if (!-e $request_filename) {
　　　　　　rewrite ^/(.*) /qiancheng/index.html last;
　　　　　　break;
　　　　}
　　}
}

配置后刷新页面出现404的话前端改一下打包文件把相对路径改成绝对路径就OK了!

// 这是原来的代码
<link href=./static/css/app.917e9845e61fd94284baf966597e6264.css rel=stylesheet>
// 这是修改后的代码
<link href=/static/css/app.917e9845e61fd94284baf966597e6264.css rel=stylesheet>
// 如果访问的是子目录请加上子目录
<link href=/子目录/static/css/app.917e9845e61fd94284baf966597e6264.css rel=stylesheet>

 2.

把项目打包后的dist里面的文件复制粘贴到Nginx的html文件下（替换Nginx的文件）