由于实际业务逻辑复杂,需要将原生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><%= htmlWebpackPlugin.options.title %></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;
复制代码