Vue CLI 3：使用Foundation 6構建生產

Question

我有一個帶有./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 build”時 ，基礎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')
      }
    }
  }
}

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

答案來自這里 。 請參閱rafaeldiaz21的評論。