https://example.com/user/id 404
例如 https://example.com/user/id
由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就尴尬了。
解决办法
1、 nginx 配置
location / {
try_files $uri $uri/ /index.html;
}
vue.config.js 配置 publicPath
const BASE_URL = process.env.NODE_EVN === 'production'
? './'
: '/'
const port = process.env.PORT || 8080
module.exports = defineConfig({
// 控制转译那些node_modules文件,默认false忽略全部,true全部转移,可以传一个数组来选择指定的文件
transpileDependencies: true,
// 基本路径
publicPath: BASE_URL,
// 是否使用带有浏览器内编译器的完整构建版本
runtimeCompiler: true
})
静态文件引入方式
必须使用 <%= BASE_URL %>
<script src="<%= BASE_URL %>server.js"></script>
路由配置
const router = new Router({
mode: 'history',
routes
})
网友评论