nginx部署vue项目时build配置及相关指令说明

  • A+
所属分类:Web前端
摘要

注:由于项目里使用的是老版本的vue-cli,新版本@vue/cli配置会在旁说明。老版本的配置文件在config/index.js中,如果是cli 3.x后续版本,需在项目 (和 package.json 同级的) 根目录中创建vue.config.js文件进行配置。


vue配置

注:由于项目里使用的是老版本的vue-cli,新版本@vue/cli配置会在旁说明。

项目config配置

老版本的配置文件在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, '../flytree/index.html'),             // 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。             // 新版本使用:outputDir             assetsRoot: path.resolve(__dirname, '../flytree'),             // 指定除了index.html外的静态资源的目录             // 新版本使用:assetsDir             assetsSubDirectory: 'public',             // 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。             // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径             // 如我在index.html中应用了张在pulblic下的图片flytree.jpg             // 则引用是 src='./public/flytree.jpg'             // 新版本:publicPath             assetsPublicPath: './',         }     } } 

配置以后bulid后,部署的文件会在项目下flytree文件下。

路由配置

如果在ngnix代理的时候不是配置到根路径/的话,则要配置base,它指定的是应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"
router/index.js配置:

const vueRouter = new Router({     mode: "history",     base: "/flytree",     routes: [] }) 

外部文件应用配置

如配置了assetsPublicPath路径,如这里配置的是./相对路径,则在发布的时候要将引用的静态资源设置在,其路径里,如:

<img src="./public/img/flytree.png" alt="nginx部署vue项目时build配置及相关指令说明">  <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的配置

http {     include       mime.types;     default_type  application/octet-stream;      access_log  logs/access.log  main;      sendfile        on;     keepalive_timeout  65;      server {         listen       8023;         server_name  localhost;          location /flytree {             alias F:/Program_D/work/demo/flytree/;             index  index.html index.htm;             try_files  $uri $uri/ /index.html;         }          error_page   500 502 503 504  /50x.html;         location = /50x.html {             root   html;         }     } } 

如此,项目就部署在http://127.0.0.1:8023/flytree下了。

补充说明

  1. 关于 try_files $uri $uri/ /index.html的说明:
    Niginx中Vue Router 历史(history)模式的配置