我更新了一个4年前的vue应用程序，当我这样做的时候，我失去了应用程序从bootstrap和bootstrap-vue的所有样式。我在其他软件问题中看到，这通常与webpack或它们的导入方式有关
index.js当前
import { BootstrapVue } from 'bootstrap-vue';
import Vue from 'vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
// linter doesn't get that bootstrap css comes from bootstrap-vue
/* eslint-disable import/no-extraneous-dependencies */
import 'bootstrap/dist/css/bootstrap.css';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
});
什么也没显示。当我在index.html的部分添加实际链接时，我得到一些样式，但不是全部，所以我想继续使用我上面的方式，并找出为什么样式不显示
这是我的webpack配置，因为我怀疑那里有一个问题
const config = require('../config')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = {
mode: 'development',
devServer: {
hot: true,
watchOptions: {
poll: true
}
}, module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader'
}, {
test: /.js$/,
use: 'babel-loader'
}, {
test: /.styl(us)?$/,
use: [ 'vue-style-loader', 'css-loader', 'stylus-loader' ]
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader',
]
}
]
},plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
]
}
packagejson
{
"name": "surveyxpress",
"version": "1.0.0",
"description": "SurveyXpress",
"author": "enric ",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"ace-builds": "^1.2.0",
"ansi-styles": "^3.2.1",
"babel-loader": "^8.2.2",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"color-convert": "^1.9.3",
"escape-string-regexp": "^1.0.5",
"firebase": "^8.2.7",
"firebase-admin": "^9.5.0",
"firebaseui": "^4.7.3",
"fs.realpath": "^1.0.0",
"glob": "^7.1.6",
"jquery": "^3.5.0",
"lodash": "^4.17.20",
"survey-knockout": "^1.8.31",
"surveyjs-editor": "^1.1.25",
"vue": "^2.6.12",
"vue-router": "^3.5.1",
"vuefire": "^1.4.3",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.17",
"@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/preset-env": "^7.12.17",
"@vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.2.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"babel-plugin-istanbul": "^6.0.0",
"babel-plugin-transform-runtime": "^7.0.0-beta.3",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.3.0",
"chalk": "^2.4.2",
"chromedriver": "^2.46.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
"css-loader": "^5.0.2",
"cssnano": "^4.1.10",
"eslint": "^7.20.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.1",
"eslint-plugin-import": "^2.22.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"firebase-functions-test": "^0.2.3",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^5.1.0",
"http-proxy-middleware": "^1.0.6",
"inject-loader": "^4.0.1",
"karma": "^6.1.1",
"karma-coverage": "^2.0.3",
"karma-mocha": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.8",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^5.0.0",
"lolex": "^6.0.0",
"mocha": "^8.3.0",
"nightwatch": "^1.5.1",
"node-sass": "^5.0.0",
"opn": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"ora": "^5.3.0",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^3.0.2",
"sass-loader": "^11.0.1",
"selenium-server": "^3.141.59",
"semver": "^7.3.4",
"shelljs": "^0.8.4",
"sinon": "^9.2.4",
"sinon-chai": "^3.5.0",
"stylus": "^0.54.8",
"stylus-loader": "^5.0.0",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.23.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-dev-middleware": "^4.1.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^5.7.3"
},
"engines": {
"node": ">= 14.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
如果已经四年了，您很可能刚刚从v2.0之前的版本升级到2.21.x。
我建议您阅读有关突破性更改的内容，并逐步完成迁移指南，以防模板中的元素已被弃用或重新使用:
https://bootstrap-vue.org/docs/reference/changelog v200