本文最后更新于 almost 6 years ago,文中所描述的信息可能已发生改变。
使用 Vue.js 过程中的一些笔记。
FAQ
记录一些细节问题以及不易搜索到的解决方法。
Parcel.js + Vue
非父子组件的通信
Build Lib Without Dependencies
使用 vue-cli@3.x
构建自己的库时,因为又引入了第三方组件,打包后将代码合在了一起显得很大。 所以应当只打包自己的组件,而不打包内部引入组件的代码。(依赖自然会安装)
Webpack 文档中存在这样的选项,也就是注明 externals
。 外部扩展 - Webpack
可以在 vue.config.js
中定义 Webpack 配置。 configureWebpack
js
module.exports = {
configureWebpack: {
// externals: ['v-tooltip']
// 但是连字符可能识别有问题, 不能这么写
externas: {
VTooltip: 'v-tooltip',
},
},
}
SPA 预渲染
使用HTML5 History 模式可以使 URL 显得更美观。 但与此同时,由于是单页应用,没有后台配置支持的话,直接访问相关路由或刷新时会导致页面访问 404。 这时,又不想配置后台,又不想放弃 History 模式,则还有另外一条出路。
也就是进行预渲染。
可用的插件:
Install
bash
yarn add -D prerender-spa-plugin
Config
js
// vue.config.js
const path = require('node:path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: ['/', '/go', '/unit'],
}),
],
},
}
To Be Continued.