我的解决方式如下,可以参考一下我的解决方案。
1、创建路由对象
// 路由对象
export default new VueRouter({
mode:'history',
routes: router
});
2、配置vue.config.js
没有这个文件就创建一个,位置和babel.config.js
同级
module.exports = {
publicPath: '/', //这个必须,引入静态资源需要从根路径引入,否则会找不到静态资源
devServer: {
// history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项
historyApiFallback: {
index: '/index.html' //与output的publicPath
},
},
}
3、配置Nginx
location /{
root /data/works/blog;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
第二条配置完后,本地项目运行已经没有问题了,但是部署之后还是会出现404问题,所以不要忘记配置Nginx。