Vue CLI 3：使用 Foundation 6 进行生产构建答案

【问题标题】：Vue CLI 3: production build with Foundation 6Vue CLI 3：使用 Foundation 6 进行生产构建
【发布时间】：2019-04-20 03:35:39
【问题描述】：

我有一个带有 ./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')
      }
    }
  }
}

【问题讨论】：

标签： javascript webpack zurb-foundation zurb-foundation-6 vue-cli-3

【解决方案1】：

首先，改变

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

答案来自here。请参阅 rafaeldiaz21 的评论。

【讨论】：