vue-cli中的小操作

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中的小操作

推荐阅读更多精彩内容