尝新vue3.4.0版 多页面应用

由于实际业务逻辑复杂，需要将原生jQuery代码与vue一起开发，逐渐的替换为vue代码；

将vue的代码 build的后的indexvue.html页面 ，由原生iframe中的src地址引入，进而进行混合开发方式。 当更多的新业务页面增加时，则需要vue进行多个模块的开发，进而输出多个出口的indexHTML，独立开发个模块。

爬坑点

• 目录结构

│  .browserslistrc // 配置目标浏览器
│  .env.development // 开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│  .env.localdev // 本地开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│  .env.production // 生产环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│  .env.tests // 测试环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│  .eslintrc.js // eslint 配置
│  .gitignore
│  .postcssrc.js // postcss配置，一般不会用到，使用默认值
│  babel.config.js // babel配置，一般不会用到，使用默认值
│  package-lock.json
│  package.json
│  README.md
│  title.js // 统一配置生成页面的 title
│  vue.config.js // vue 配置，可配置 webpack 等，可参照 https://cli.vuejs.org/zh/config/
│  
├─public // 此文件夹下可以放置一些静态资源，除了index.html会经过处理外，其他文件都会原封不动的自动复制到 htdocs 根目录下，不会经过 webpack 的处理。
│      favicon.ico
│      index.html // 所有的打包页面都会经过这个文件，本模板对多页的配置采用了统一处理，当然也可以在 vue.config.js 单独配置每个页面，可参照 https://cli.vuejs.org/zh/config/#pages
│      
├─src // 源代码文件夹
│  ├─assets // 资源文件夹，可放置 css、images等
│  │      logo.png
│  │      
│  ├─components // 组件文件夹，可定义一些公共组件
│  │      Header.vue
│  │      
│  ├─pages // 页面文件夹，每个页面都是一个文件夹
│  │  ├─admin // admin 页面
│  │  │      manage   //文件夹 admin模块页面 对应的views页面
│  │  │ │       account   //文件夹
                    index.vue // account业务页面
│  │  │      admin.js // 一般不做更改
│  │  │      admin.vue // 页面的 html、css、js 都写在这个文件里
│  │  │      router.js //路由配置
│  │  │      
│  │  ├─index
│  │  │      app.js
│  │  │      app.vue
│  │  │      
│  │  └─user
│  │      └─index
│  │              app.js
│  │              app.vue
│  │              
│  ├─style // 公共样式文件夹，可以定义一些公共样式，如浏览器重置样式 reset.less，此文件夹可按需求随意更改 
│  │  │  index.less
│  │  │  
│  │  └─core
│  │          index.less
│  │          reset.less
│  │          
│  └─utils // 常用 js 工具类
│      └─core
│              http.js // http 请求库，封装 axios，可直接调用
│              
└─tests // 单元测试，可忽略
    └─unit
            .eslintrc.js
复制代码

• vue.config.js

const path = require('path')

module.exports = {

    publicPath:'./',
    outputDir:path.resolve(__dirname, '../src/main/resources/static/vuestatic'),
    indexPath:path.resolve(__dirname, '../src/main/resources/static/indexvue.html'),
    pages: {
        admin: {
            // 应用入口配置，相当于单页面应用的main.js，必需项
            entry: 'src/pages/admin/admin.js',

            // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
            template: 'public/admin.html',

            // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致

            filename: 'vueindex.html',

            // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
            // 需要注意的是使用title属性template 中的 title 标签需要是 
            title: 'admin page',

            // 包含的模块，可选项
            // chunks: ['admin']
        },
        // 只有entry属性时，直接用字符串表示模块入口
        user: 'src/pages/user/user.js'
    },
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                data: `@import "src/style/resource.scss";`
            }
        }
    },
    devServer: {
        port: 8080,
        proxy: 'http://localhost:8087',
    },
}
复制代码

• axios环境判断

// 区别于生产环境和一般环境
export const baseurl = location.origin + (/现网/.test(location.href) ? "/项目标识" : "")
复制代码

• axios请求

import axios from 'axios';
import { Notification } from 'element-ui';

const Request = axios.create({
  baseURL: '/',
  timeout: 0, // 请求超时时间
});

// // request拦截器
// Request.interceptors.request.use(config => {
//   // config.headers['authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
//
//   return config
// }, error => {
//   // Do something with request error
//   console.log(error) // for debug
//   Promise.reject(error)
// })
//

// respone拦截器
Request.interceptors.response.use(
  result => {
    return result.data;

    // 后端接口目前没有统一规划
    // const res = result.data
    // if (res.code !== 0) {
    //   Notification({
    //     type: 'error',
    //     message: result.message,
    //     duration: 2000
    //   })
    //
    //   return Promise.reject('error')
    // } else {
    //   return result.data
    // }
  },
  error => {
    Notification({
      type: 'error',
      message: error.message,
      duration: 2000,
    });
    return Promise.reject(error);
  },
);

export default Request;

复制代码

转载于:https://juejin.im/post/5c80dc68f265da2dc453a65f