Vue-cli3基础教程(十三)

Vue 项目通常打包后部署到nginx服务器上的html目录里，如果把项目部署到nginx的html的二级目录下呢？实现步骤如下：

1.router.js 添加 base


export default new Router({
    base: '/vblog/',
    mode: 'history',
    ...
})

2.根目录新建vue.config.js文件添加

module.exports = {
    publicPath: '/vblog/',
    outputDir: 'dist',
    ...
};

3.在入口文件添加base 在index.html入口文件，添加base.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta base="/vblog/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  ...
  </body>
</html>

4.服务器 nginx.conf 文件配置

location /vblog {
      alias   C:/nginx-1.21.0/html/vblog;
      try_files $uri $uri/ /vblog/index.html;
      index  index.html index.htm;
}


location /api/ {
    proxy_pass   http://127.0.0.1:8080/myblogdemo/;
}