nginx部署使用history模式的vue项目详细配置【可多级目录】教程
介绍
本文是篇详细的介绍vue
项目在history
模式下发布时build
,项目如何配置,nginx
如何配置,才能正常的使用历史模式。或者在二级目录下,多级路径下也能正常使用历史模式。
本文的例子中假设,nginx
全部都是配置在 flytree.can 域名下。
且路由中配置有以下路径:
const routes = [
{ path: '/', redirect: "/index"},
{ path: '/login', component: Login },
{ path: '/welcome', component: Welcome }
]
一级路径的配置
应用放在服务器根目录下。路由也就是域名后的第一级路径。如:
url对应打开路由http://www.flytree.can/login*82ac017c5a1be220dbddfe2d7582eab75*http://www.flytree.can/welcom/welcom
#### 路由配置
const router = new VueRouter({
mode: 'history',
routes
})
nginx配置
location / {
try_files $uri $uri/ /index.html;
}
二级路径的配置
应用不是放在服务器根目录下,而是location
有上下文的。如配置了web
上下文,则:
url对应打开路由http://www.flytree.can/web/login*82ac017c5a1be220dbddfe2d7582eab710*http://www.flytree.can/web/welcom/welcom
#### 路由配置
如果在ngnix
代理的时候不是配置到根路径/
的话,则要配置base
,它指定的是应用的基路径。例如,如果整个单页应用服务在 /app/
下,然后 base
就应该设为 "/app/"
。
router/index.js配置:
const vueRouter = new Router({
mode: "history",
base: "/web",
routes: routes
})
配置了base
后,应用就会在base之后打开了,如,后面配置了个/login
路由,则是在/web/login
中打开此路由。
项目config配置
注:由于项目里使用的是老版本的vue-cli
,新版本@vue/cli
配置会在旁说明。
老版本的配置文件在config/index.js
中,如果是cli 3.x
后续版本,需在项目 (和 package.json 同级的) 根目录中创建vue.config.js
文件进行配置。
const path = require('path');
module.exports = {
module.exports = {
build: {
// 指定生成的 index.html 的输出路径 (相对于 配置文件所在路径)。也可以是一个绝对路径。
// 新版本使用:indexPath
index: path.resolve(__dirname, '../web/index.html'),
// 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。
// 新版本使用:outputDir
assetsRoot: path.resolve(__dirname, '../web'),
// 指定除了index.html外的静态资源的目录
// 新版本使用:assetsDir
assetsSubDirectory: 'public',
// 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。
// 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径
// 如我在index.html中应用了张在pulblic下的图片flytree.jpg
// 则引用是 src='./public/flytree.jpg'
// 新版本:publicPath
assetsPublicPath: '/web/',
}
}
}
配置以后bulid
后,部署的文件会在项目下web
文件下。
外部文件应用配置
如配置了assetsPublicPath
路径,如这里配置的是./
相对路径,则在发布的时候要将引用的静态资源设置在,其路径里,如:
<img src="./public/img/flytree.png">
<script>
axios.get('./public/JSON/data.json')
</script>
为了方便开发和发布时使用静态资源,可以:
// main.js中配置
window.base_file_url =
process.env.NODE_ENV === 'production' ? '.' : ''
// 使用
axios.get(base_file_url + '/public/JSON/data.json')
nginx的配置
location /web {
alias F:/Program_D/work/demo/web/;
try_files $uri $uri/ /web/index.html;
}
如此,项目就部署在http://www.flytree.cam/web
下了。
多级路径的配置
可能会有人说,谁TM竟然要这么麻烦,搞这么多级路径干啥。但事实就是还真能遇到就要配这么多级的路径。要不然就不会有本文了。