javascript - Vue CLI 3:使用 Foundation 6 进行生产构建
问题描述
我有一个带有 ./src/main.js 的 Vue CLI 3 项目,如下所示:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import jQuery from 'jquery'
import 'foundation-sites/dist/css/foundation.min.css'
import './assets/scss/styles.scss'
import 'foundation-sites'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
jQuery(document).foundation()
当使用“yarn serve”在生产模式下运行时,一切都编译得很好。
但是,当我运行'yarn build'时,Foundation CSS 和 JS 都不存在于生产构建中。./assets/scss/styles.scss 工作正常,但我没有得到 Foundation 样式,并且还出现错误:
TypeError: z(...)(...).foundation 不是函数
我猜 Webpack 或我的 Vue 配置一般都缺少一些东西,所以这里是该文件供参考:
const path = require('path');
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/coe_petition/' // asset url prefix in production mode
: '/', // asset url prefix in development mode
outputDir: '../../coe_petition', // running 'yarn build' will send production code here
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [path.resolve(__dirname, "./src/styles/scss/styles.scss")]
}
},
configureWebpack: {
resolve:{
alias: {
'^': path.resolve(__dirname, '/usr/local/vueapps/shared/src'),
't^': path.resolve(__dirname, '/usr/local/lib/layouts')
}
}
}
}
解决方案
一、改变
import 'foundation-sites/dist/css/foundation.min.css'
import 'foundation-sites'
至
import FoundationCss from 'foundation-sites/dist/css/foundation.min.css'
import FoundationJs from 'foundation-sites'
然后加:
Vue.use(FoundationCss)
Vue.use(FoundationJs)
或者,您可以这样做而不是 Vue.use():
new Vue({
FoundationCss,
FoundationJs,
router,
render: h => h(App)
}).$mount('#app')
答案来自这里。请参阅 rafaeldiaz21 的评论。
推荐阅读
- r - 如何在使用 mle 函数时摆脱 optim 中的错误
- vue.js - 如何防止 Vue Snotify 确认显示多个实例
- postgresql - 在 Postgres 中将复合外键设置为 NULL
- android - 为什么 FirebaseAnalytics.ConsentType ANALYTICS_STORAGE 默认被拒绝?
- docker - 如何在同一个 docker-compose 项目中优先考虑具有相同名称的容器?
- sass - 带包裹的条件导入:拒绝从...应用样式,因为它的 MIME 类型('text/html')
- python - 如何检查事件中的权限?
- tensorflow - 对序列约束进行后处理 LSTM 输出
- android - 如何使用 android/java 实现浮动地图
- python - Google API OAuth 2.0 无法验证错误 400:redirect_uri_mismatch