Vue CLI 3: производственная сборка с Foundation 6 - PullRequest
Новая
       12

Vue CLI 3: производственная сборка с Foundation 6

0 голосов
/ 17 ноября 2018

У меня есть проект Vue CLI 3 с ./src/main.js, который выглядит следующим образом: 

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

1 Ответ

0 голосов
/ 17 ноября 2018

Сначала измените 

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.

...