介绍

本文是篇详细的介绍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竟然要这么麻烦,搞这么多级路径干啥。但事实就是还真能遇到就要配这么多级的路径。要不然就不会有本文了。

标签: nginx, index, html, history, 配置, 路径, web, app, vue

相关文章推荐

添加新评论,含*的栏目为必填