1.安装插件
npm install jquery --save ?????????//jquery插件npm install bootstrap --save ??//bootstrapnpm install --save popper.js ?//popper.js ???
2.修改build目录下的webpack.base.conf.js配置文件：
1）加入webpack对象：var webpack=require(‘webpack‘);
2）在module.exports里面加入以下配置：
?plugins: [ ???new webpack.optimize.CommonsChunkPlugin(‘common‘), ???new webpack.ProvidePlugin({ ?????$: ‘jquery‘, ?????jQuery: ‘jquery‘, ?????Popper: [‘popper.js‘, ‘default‘] ???}) ?]webpack.base.conf.js配置文件最终代码
‘use strict‘const path = require(‘path‘)const utils = require(‘./utils‘)const config = require(‘../config‘)const vueLoaderConfig = require(‘./vue-loader.conf‘)const webpack = require(‘webpack‘)function resolve (dir) { ?return path.join(__dirname, ‘..‘, dir)}module.exports = { ?context: path.resolve(__dirname, ‘../‘), ?entry: { ???app: ‘./src/main.js‘ ?}, ?output: { ???path: config.build.assetsRoot, ???filename: ‘[name].js‘, ???publicPath: process.env.NODE_ENV === ‘production‘ ?????? config.build.assetsPublicPath ?????: config.dev.assetsPublicPath ?}, ?resolve: { ???extensions: [‘.js‘, ‘.vue‘, ‘.json‘], ???alias: { ?????‘vue$‘: ‘vue/dist/vue.esm.js‘, ?????‘@‘: resolve(‘src‘), ???} ?}, ?module: { ???rules: [ ?????{ ???????test: /\.vue$/, ???????loader: ‘vue-loader‘, ???????options: vueLoaderConfig ?????}, ?????{ ???????test: /\.js$/, ???????loader: ‘babel-loader‘, ???????include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘)] ?????}, ?????{ ???????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, ?????????name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘) ???????} ?????}, ?????{ ???????test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, ?????????name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘) ???????} ?????}, ?????{ ???????test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, ?????????name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘) ???????} ?????} ???] ?}, ?node: { ???// prevent webpack from injecting useless setImmediate polyfill because Vue ???// source contains it (although only uses it if it‘s native). ???setImmediate: false, ???// prevent webpack from injecting mocks to Node native modules ???// that does not make sense for the client ???dgram: ‘empty‘, ???fs: ‘empty‘, ???net: ‘empty‘, ???tls: ‘empty‘, ???child_process: ‘empty‘ ?}, ?plugins: [ ???new webpack.optimize.CommonsChunkPlugin(‘common‘), ???new webpack.ProvidePlugin({ ?????$: ‘jquery‘, ?????jQuery: ‘jquery‘, ?????Popper: [‘popper.js‘, ‘default‘] ???}) ?]}#在main.js中把jQuery，bootstrap的js和css通过import引进来
代码如下：
import $ from ‘jquery‘import ‘bootstrap/dist/css/bootstrap.min.css‘import ‘bootstrap/dist/js/bootstrap.min‘
最后重新启动一下：
npm run dev
vue-cli 引入jQuery，Bootstrap，popper
原文地址：https://www.cnblogs.com/ln09099/p/9528339.html