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
引入第三方js插件
直接在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>
