基于 vue 的前后端分离项目开发流程指引

本地创建项目

推荐使用vue ui创建

vue2.x

vue3

项目配置

页面路径配置

-配置多页面应用vue.config.js，打包后生成 index.html，login.html 两个页面：

module.exports = {
  ...
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源就是在public里面创建的入口文件名
      template: 'public/index.html',
      // 编译后在 dist文件夹中的输出文件名，可选项，省略时默认与模块名一致
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '后台管理系统',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
    },
    // 当使用只有入口的字符串格式时，也就是只有entry属性时，直接用字符串表示模块入口
    login: 'src/login.js',
  },
  ...
}

• 区分开发环境vue.config.js

...
if (!process.env.VUE_APP_DEP) {
  Pages.login = {
    entry: 'src/login.js',
    template: 'devpublic/login.html',
    title: '登录-疫情常态化物资管理系统',
  };
}
...

接口代理配置

module.exports = {
  ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://yqcthmanagertest.dahe.cn',
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
  ...
}

上述代码会对前缀为/api的请求使用代理配置，代理到target字段配置的地址，同时在代理前，移除请求地址的/api前缀。

注意：/api为ajax方法封装的全局接口请求前缀，非必要。若后台接口地址有统一的前缀，如/potal/xxx/xxx，则可直接使用/portal作为触发字符串，同时移除pathRewrite配置

访问路径配置

module.exports = {
  ...
  publicPath: process.env.NODE_ENV === 'production' ? '/portal' : '/',
  ...
}

假设项目部署在生产环境域名的/portal/路径下，上述配置会区分生产环境（production）和开发环境（development），在生产环境需访问xxx.xxx:port/protal/访问页面，在开发环境直接访问根路径。

若生产环境代码部署在域名根路径，则不需要进行此项配置。

打包配置

配置打包路径

outputDir: process.env.VUE_APP_59 ? 'dist1' : 'dist2'

打包路径默认为dist，使用outputDir字段进行自定义配置。如上代码，根据环境变量，配置了不同的打包路径。

配置gzip压缩

yarn add --save-dev compression-webpack-plugin

// vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const path = require('path');

module.exports = {
  ...
  plugins: [
      new CompressionWebpackPlugin({
        test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
        threshold: 10240,
        deleteOriginalAssets: false,
      }),
    ],
  ...
}

上述配置会将超过设定大小的静态资源压缩为gzip文件。

注意：服务器需要配置开启gzip资源请求，才能正常请求到gzip文件资源

nginx 配置

由运维配置在生产环境服务器

配置接口代理

配置

• 访问页面无需添加.html后缀

location / {
    # 路径无需加.html后缀
    if (!-e $request_filename){
          rewrite ^(.*)$ /$1.html last;
          break;
    }
    root   /your/page/root/;
    index  index.html index.htm;
}

• 添加接口反向代理，如下配置会将前缀为/api的请求地址代理到test.dahe.cn域名下，并移除请求地址的/api前缀

location  /api {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass  https://test.dahe.cn;
}

• 部署在域名子路径下，下列配置，当访问xxx.xxx.cn/portal/时，会去服务器 /data/wwwroot/projectname/dist/ 路径下寻找页面

location /portal {
  alias /data/wwwroot/projectname/dist/
}

上述配置为各项目通用，一般运维会提前配置好，开发人员根据项目实际情况向运维提出修改

开发人员需掌握基本的nginx配置规则，方便项目开发及与运维人员沟通。