大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

VUE-CLI 3 踩坑

基本信息请浏览 官方文档

环境变量

很多时候由于需要根据运行环境的不同设置不同的配置信息,这时cli 3 提供的环境变量的配置就有很大作用了。

.env                    # 在所有的环境中被载入
.env.development        # 在开发环境中被载入
.env.production         # 在生产环境中被载入
.env.test               # 在测试环境中被载入

如果你通过 --mode 修改了默认的环境的标识,这时你需要与你设置的环境标识相对应。

-- mode mymode
.env.mymode

详细资料

根据不同环境注入不同的静态依赖

文件var.conf.js

module.exports = {
  development: {
    API_PREFIX: '"http://dev.xxx.com"',
    APP_INFO: JSON.stringify({
      name: 'app dev',
      version: 'x.x.x'
    })
  },
  production: {
    API_PREFIX: '"http://prod.xxx.com"',
    APP_INFO: JSON.stringify({
      name: 'app prod',
      version: 'x.x.x'
    })
  }
  
}

webpack 通过DefinePlugin内置插件将proces.env注入到客户端插件中

文件 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('define')
      .tap(args => {
        args[0]['process.env'] = merge(args[0]['process.env'], test[process.env.NODE_ENV])
        return args
      })
  }
}

链式操作

配置markdown

npm install vue-markdown-loader markdown-it markdown-it-container --save

文件 vue.config.js

const markdownRender = require('markdown-it')()

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use("vue-markdown-loader")
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true,
        use: [
          [require('markdown-it-container'), 'demo', {
            validate: function (params) {
              return params.trim().match(/^demo\s*(.*)$/)
            },

            render: function (tokens, idx) {
              console.log(tokens, idx)
              if (tokens[idx].nesting === 1) {
                // 1.获取第一行的内容使用markdown渲染html作为组件的描述
                let demoInfo = tokens[idx].info.trim().match(/^demo\s+(.*)$/)
                let description = (demoInfo && demoInfo.length > 1) ? demoInfo[1] : ''
                let descriptionHTML = description ? markdownRender.render(description) : ''
                // 2.获取代码块内的html和js代码
                let content = tokens[idx + 1].content
                // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
                return `<demo-block>
                <div class="source" slot="source">${content}</div>
                ${descriptionHTML}
                <div class="highlight" slot="highlight">`
              } else {
                return '</div></demo-block>\n'
              }
            }
          }]
        ]
      })
  }
}