Vue CLI 部分问题
1. Vue CLI
生成的项目在 Safari
下无法热更新
此为 Safari
bug,可以在 vue.config.js
加上:
module.exports = {
chainWebpack: config => {
// Fix safari cache bug
if (process.env.NODE_ENV === 'development') {
config
.output
.filename('[name].[hash].js')
.end()
}
}
}
2. Vue CLI
生成的项目使用 CDN
在 vue.config.js
加上:
module.exports = {
configureWebpack: config => {
config.externals = {
vue: 'Vue',
'ELEMENT': 'ELEMENT'
}
}
}
然后在 index.html
引入相应的库:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
</head>
<body>
<div id="root"></div>
<% const suffix = NODE_ENV === 'development' ? '' : '.min' %>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime<%= suffix %>.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/index.js"></script>
</body>
</html>
在 development
需要引入完整的库,如果引入类似 vue.runtime.min.js
以 .min.js
结尾的文件,在开发时会不方便调试错误。
3. Vue CLI
多页面项目
如果想用 @vue/cli
实现多页面,在 vue.config.js
加上:
module.exports = {
pages: {
page1: {
entry: 'src/page1.js',
template: 'public/page1.html',
filename: 'page1.html',
chunks: ['chunk-vendors', 'chunk-common', 'page1']
},
page2: {
entry: 'src/page2.js',
template: 'public/page2.html',
filename: 'page2.html',
chunks: ['page2']
}
}
}
虽然是多页面打包,但是 @vue/cli
依然会将所有页面使用过的公共库打包到一处,并未能按照单个页面依次分拆,可以在 vue.config.js
加上:
module.exports = {
chainWebpack: config => {
config.optimization.delete('splitChunks')
}
}
评论(7)
博主你好,请问hermit有对应的typecho插件可以支持自定义歌曲链接的吗,我想从wordpress迁移到typecho
没有对应的插件
好的,谢谢
啊这,博主牛啊
mufeng,请问还有mirana主题在嘛,我群也退了,文件也没有保存。。。突然好怀念啊~~
感谢大神分享干货
热更新是个好东西