vue-cli 的history模式去掉#
方法:
export default new Router({
mode: 'history', // 后端支持可開
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
造成問題:
打包后,使用nginx啟動dist文件夾,但是頁面打開,刷新報404
3.png
修改nginx的文件
nginx.conf.png
location / {
try_files $uri $uri/ /index.html;
}
//umijs 項目.umirc.ts ;//nginx.conf文件配置
//.umirc.ts
base: '/haohao/',
publicPath: '/haohao/',
//這是nginx.conf文件配置
location /haohao/ {
try_files $uri $uri /haohao/;
}
重新啟動,刷新頁面,空白頁報錯
Uncaught SyntaxError: Unexpected token <
vendor.d28ad3cfa3201c7af52a.js:1 Error: Loading chunk 10 failed.
at HTMLScriptElement.d (manifest.30106ba8d1bd312e7adb.js:1)
a @ vendor.d28ad3cfa3201c7af52a.js:1
(anonymous) @ vendor.d28ad3cfa3201c7af52a.js:1
7.png
將config文件夾下的
assetsPublicPath: './',
改成
assetsPublicPath: '/',
8.png
引入第三方j(luò)s插件
直接在index頁面引入(使用import引入,會有一個報錯,EasePack.min.js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>商戶管理</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="static/js/TweenLite.min.js"></script>
<script src="static/js/EasePack.min.js"></script>
</body>
</html>
改成
<script src="/static/js/TweenLite.min.js"></script>
<script src="/static/js/EasePack.min.js"></script>
