美文网首页
vue-cli中的小操作

vue-cli中的小操作

作者: leesession | 来源:发表于2018-04-24 17:44 被阅读0次

1.想要 禁止用户在ios端缩放,那就在 根目录的index.html中 替换

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

2.关闭打包之后,js中生成 map的文件,只需在 config/index.js 中:

productionSourceMap: false,

3.配置跨域,在config/index.js中找到 proxyTable:{},改为

      '/api': {
        target: '需要跨域的网址',//如:http://tp.zlzjcyw.com/
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

4.打包之后,发现dist中index.html路劲问题,在config/index.js 中,改变下assetsPublicPath

 // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

5.配置路由的懒加载 router/index.js,

import login from '@/components/login'

将import改为

const login = r => require.ensure([], () => r(require('../components/login')), 'login')

6.修改单页的标题,2步
①.在router/index中,添加meta.title

{
      path: '/',
      name: 'ActicleDetail',
      component: ActicleDetail,
      meta: {
        title: '秀文采',
      }
    },

②.在main.js中,调用钩子函数,在路由加载之前读取标题

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  beforeCreate(){
    router.beforeEach((to, from, next) => {
      window.document.title = to.meta.title;
      next()
    })
  }
})

7.解决路由跳转时,让页面滚动到顶部,在router/index.js中,,添加scrollBehavior

export default new Router({
  scrollBehavior (to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 0)
    })
  }

8.vue-cli打包后,css3兼容性没配置:package.json

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "last 10 Chrome versions",
    "last 5 Firefox versions",
    "Safari >= 6",
    "ie > 8"
  ]

相关文章

  • vue-cli中的小操作

    1.想要 禁止用户在ios端缩放,那就在 根目录的index.html中 替换 2.关闭打包之后,js中生成 ma...

  • VUE中一些操作

    随笔,记录一些可能遇见的小操作,以防每次需要另外查找 1、Vue-cli 从2.9.6 版本升级至3.0

  • vue_cli

    作者:台湾小凡 1. vue-cli 简介 简单介绍 vue-cli 官网 [vuejs/vue-cli: Sim...

  • vue mixin混入的简单操作(vue-cli中的操作)

    mixin混入真的是方便,在不同的组件中有相同的操作方法时可以单独提取出来,放到单独的文件中,在使用的组件中注入即...

  • vue-cli中的CommonsChunkPlugin都做了些啥

    vue-cli中的CommonsChunkPlugin 下图是使用 vue-cli 构建之后,webpack.pr...

  • vue中使用Tinymce编辑器

    首先安装所需的两个包 查看vue-cli脚手架版本号,根据vue-cli版本号进行以下操作 复制内容和样式包① 在...

  • SPA:单页应用

    路由——vue-cli 场景1:中后台管理系统技术栈:SpringBoot、vue-cli、SPA、Element...

  • SPA:单页应用

    路由——vue-cli 场景1:中后台管理系统技术栈:SpringBoot、vue-cli、SPA、Element...

  • python使用

    一、list中的每个元素都进行小操作 list = list(map(小操作,list名字)) newList =...

  • 2019-04-17

    SPA:单页应用 路由——vue-cli 场景1:中后台管理系统技术栈:SpringBoot、vue-cli、SP...

网友评论

      本文标题:vue-cli中的小操作

      本文链接:https://www.haomeiwen.com/subject/gywjlftx.html