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'
}
}
}]
]
})
}
}