WordPress Vuejs шаблон ошибки загрузки начальной загрузки - PullRequest
Новая
       66

WordPress Vuejs шаблон ошибки загрузки начальной загрузки

1 голос
/ 21 октября 2019

Я новичок в vuejs и нашел шаблонную тему WordPress , чтобы начать отрабатывать, однако я не могу заставить все работать правильно.

Я пытаюсь включить bootstrap-vueв тему, но я получаю следующую ошибку при запуске 'npm run dev или build or watch' --- 

    ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
TypeError: Cannot read property 'charCodeAt' of undefined
    at module.exports (/var/www/html/wp-content/themes/vuejs-wordpress-theme-starter-master/node_modules/postcss-value-parser/lib/parse.js:17:22)
    at new ValueParser (/var/www/html/wp-content/themes/vuejs-wordpress-theme-starter-master/node_modules/postcss-value-parser/lib/index.js:7:22)

Это мой второй сервер и 4-я попытка использовать начальную загрузку с темой.

Пока это все мои шаги по созданию нового сервера и попытке использовать тему плюс начальную загрузку --- 

>          - Create server on Digital Ocean using wordpress marketplace image      
>            setup.    
>          - Set domain to server on DO
>          - Log in SSH and run setup script.
>          - Wait for propagation.
>          - Then do this - https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-18-04
>          - Change http to https in dashboard.
>          - Copied vue theme over to directory using SFTP.
>          - Install NPM with --- apt install npm
>          - CD into theme directory and run npm install
>          - Then run - npm run watch or npm run dev
>          - install node run --- curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
>          - then run -- sudo apt-get install -y nodejs
>          - cd into directory then npm install --save-dev cross-env
>          - then - npm audit fix
>          - then - npm install --save-dev css-loader@3.2.0
>          - then - npm install --save-dev webpack-cli@3.3.9
>          - then delete package.loc
>          - then - run npm install babel-preset-stage-2 --save-dev
>          - then - run npm install --dev 
>          postcss-loader 
>          postcss-import 
>          postcss-cssnext 
>          cssnano 
>          sugarss 
>          autoprefixer --save-dev
>          - then run install vue-loader (look up command)
>          - comment out webconfig - minimize true
>          - then run npm install --save-dev css-loader sass-loader node-sass extract-loader file-loader
>          - copied previous webconfig file
>          - navigate to folder then run npm install bootstrap
>          - add import in app.js -
>          - import 'bootstrap/dist/css/bootstrap.css'
>          - import 'bootstrap-vue/dist/bootstrap-vue.css'
>          - before initating vue, add -- Vue.use(BootstrapVue)`
           - then run - npm install vue --save
           - npm install vue
           - npm install vue-template-compiler

Что я делаю не так?

ВЕБ-ПАК КОНФИГ

1 Ответ

1 голос
/ 25 октября 2019

сначала я бы удостоверился, что все загрузчики загружены вашим файлом package.json (я вижу только один из них в ваших шагах):

vue-style-loader и css-loader

Во-вторых, в вашем webpack конфиге, ваш module.rules должен иметь этот объект: 

{
  test: /\.css/,
  use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
}

И загрузите его из App.vue, в разделе , вы должны импортировать: 

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Наконец, убедитесь, что вы загружаете VueBootstrap перед объявлением Vue, например: 

...
import router from './router';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  ...

Обновление:

Переустановка веб-пакета иногда решает проблему ( source ): 

npm install --save-dev webpack

И /или: 

npm rebuild node-sass

Если ничего из этого не поможет, я бы попробовал использовать более простое правило CSS, например: 

module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          'sass-loader',
          'css-loader',
          'style-loader'
        ]
      },
 ...

и посмотреть, работает ли оно. Если да, то пошагово добавьте свой текущий файл и определите точную точку отказа (это может быть загрузчик css).

Надеюсь, это поможет!

...