1 Star 3 Fork 3

ecitlm / vue-mpa-cli

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-cli 多页面应用

基于vue-cli 2.9.3 版本vue init webpack命令生成的的应用,在此基础上进行改造成多页应用脚手架.在写多页的基础上完全与写Vue单页应用一样,并且兼容单页模块vue-router

页面创建

src/views文件夹目录可以创建页面 如index文件夹,一个页面包括以下2个文件 (index.html) 文件为根目录公用的 模板文件、根据根目录下的title.js配置生成 title标题

app.js
App.vue

文件夹里必须包括一个.html 文件,.js 文件,.vue 文件作为入口文件 npm run dev的时候提示打开 localhost:8080 即可

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080/index.html
npm run dev

# build for production with minification
npm run build
# 文件打包之后 可以启动本地服务查看
# serve with hot reload at localhost:2333
node server

webpack 打包改造

对Vue的webpack进行了改造

function getEntries (path) {
  let entries = {}
  glob.sync(path).forEach(entry => {
    if (/(views\/(?:.+[^.html]))/.test(entry)) {
      entries[RegExp.$1.slice(0, RegExp.$1.lastIndexOf('/'))] = entry
    }
  })
  return entries
}
 for (let pathname in entry) {
        let filename = pathname.replace(/views\//, '')
        let conf = {
          filename: filename === 'index'
            ? `${filename}.html`
            : `${filename}/index.html`,
          template: entry[pathname],
          inject: true,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
          },
          chunksSortMode: 'dependency'
        }
        if (pathname in devWebpackConfig.entry) {
          conf.chunks = ['manifest', 'vendor', pathname]
          conf.hash = true
        }
        devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
  }

http网络请求封装

http.js

import axios from 'axios'
let instance = axios.create({
  baseURL: process.env.BACK_BASE_URL,
  timeout: 60 * 1000
})
console.log(instance)
// request拦截
instance.interceptors.request.use(config => {
  config.headers.authorization = `token` // 头部设置token信息 可以拿vuex中数据
  return config
}, error => {
console.log('请求出错了...', error)
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  if (response.data.code === 200) {
//    return response.data
  } else {
    console.log(response)
    let err = new Error()
    err.response = response
    return Promise.reject(err)
  }
}, error => {
  return Promise.reject(error)
})

const httpRequest = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data)
      .then(res => {
        resolve(res)
      })
      .catch(error => {
        if (error.response) {
          if (error.response.status === 200) {
            reject(error.response.data)
          }
        } else if (error.request) {
          if (error.code === 'ECONNABORTED') {
            // Toast({
            //   message: '请求超时,请刷新重试',
            //   className: 'error-net',
            //   duration: 3000
            // })
          } else {
            console.log('网络断开,请检查网络')
          }
        } else {
          console.log('请求无响应')
        }
      })
  })
}

空文件

简介

vue-mpa-cli Vue多页应用脚手架 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/ecitlm/vue-mpa-cli.git
git@gitee.com:ecitlm/vue-mpa-cli.git
ecitlm
vue-mpa-cli
vue-mpa-cli
master

搜索帮助

14c37bed 8189591 565d56ea 8189591