vue-cli中的小操作

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


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: '',
  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中的小操作)