vue history 模式
1、首先判断产线项目是否放在域名根目录下
在router/index.js文件中,添加history模式
如果项目不在根目录下,比如产线项目根目录为
http://www.baidu.com/project-name/
export default new Router({
mode: 'history',
base: '/projectname/', //如果项目根目录不为域名,则添加该行
routes: [{}]
})
2、修改config/index.js文件
build: {
// Paths
publicPath: '/projectname/', //添加根目录,如果域名为根目录,则为 '/'
}
保证build后index.html引入的js、css、img等路径是正确的
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=x5-orientation content=portrait>
<link rel=icon href=/favicon.ico> <title>XX项目</title>
<link href=/css/app.ffc78a93.css rel=preload as=style>
<link href=/css/chunk-vendors.1f410e35.css rel=preload as=style>
<link href=/js/app.77b1be3b.js rel=preload as=script>
<link href=/js/chunk-vendors.c113ff89.js rel=preload as=script>
<link href=/css/chunk-vendors.1f410e35.css rel=stylesheet>
<link href=/css/app.ffc78a93.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but pain-steward doesn't work properly without JavaScript enabled. Please enable it
to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.c113ff89.js> </script> <script src=/js/app.77b1be3b.js> </script> </body> </html>
3、后台配置
Vue Router
location /projectname {
try_files $uri $uri/ /projectname/index.html;
}
后台配置的根目录需要与前台配置的根目录一致(projectname)
vue.config.js
module.exports = {
publicPath: '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888, // 端口号
host: '0.0.0.0',
https: false, // https:{type:Boolean}
open: false, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
},
configureWebpack: {
externals: {
wx: 'wx'
}
},
}
router/index.js
Vue.use(Router)
let option = {
mode: 'history',
// base: process.env.BASE_URL,
routes: [{
path: '/index',
component: index,
meta: {
title: '',
}
}, {
path: '/register',
component: register,
meta: {
title: '注册',
rank: 2
}
}, {
path: '/protocol',
component: protocol,
meta: {
title: '协议',
rank: 4
}
}, {
path: '/set-password',
component: setPassword,
meta: {
title: '设置密码',
rank: 3
}
}, {
path: '/find-password',
component: findPassword,
meta: {
title: '找回密码',
rank: 2
}
}, {
path: '/login',
component: login,
meta: {
title: '登录',
rank: 1
}
}]
}
nginx配置
server {
listen 80;
server_name localhost;
client_max_body_size 20m;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location ^~/api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
root /opt/pain/app/;
index index.html;
try_files $uri $uri/ /index.html;
}
location @rewrites {
rewrite ^(.+)$ /app/index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root /var/nginx/html/123.com;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
抱歉,暂停评论。