vue随笔

?xml version="1.0" encoding="UTF-8"?

1.动态设置图片路径

使用DefinePlugin设定环境变量：

new webpack.DefinePlugin({

   'process.env': require('../config/dev.env')

})

配置webpack.base.conf.js公共参数alias：

resolve: {

    alias: {

        'vue$': 'vue/dist/vue.esm.js',

        '@': resolve('src'),

        'img':resolve('src/assets/images')

    }

}

使用：

import A from '@/components/a.vue'

方式一：配置 img 公共路径

<img src="~img/logo.png">

div{

  background-image: url('~img/logo.png');

}

方式二：动态路径配置

let png1 = 'logo'

this.imgUrl = require( ` img/${png1}.png ` )

<img :src="imgUrl ">

<div :style="{backgroundImage: 'url(' + imgUrl + ')'}"></div>

[]2.动态设置页面title

方案一：

router.beforeEach((to, from, next) => {

    window.document.title = to.meta.name

    next()

})

方案二：

引入到main.js中

import Meta from 'vue-meta'

Vue.use(Meta)

改App.vue新增：

export default {

    name: 'App',

    metaInfo: {

      title: 'Default Title',

      titleTemplate: '%s | My Awesome Webapp'

    }

 }

在Home.vue中：

metaInfo: {

    title: ‘首页’

}