和vue2一样
这里以lodash为例
1.挂包
cnpm install lodash --save
2.在vue.config.js中 挂载webpack
const webpack = require("webpack");
3.在export中configureWebpack自动加载
configureWebpack: {
plugins: [
//自动加载模块,而不是起别名,别名需要import,而自动加载的模块不需要import既可以使用
new webpack.ProvidePlugin({
_: "lodash",
echarts: "echarts",
moment: "moment",
$: "jquery",
}),
],
},
整体代码
const webpack = require("webpack");
const path = require("path");
const resolve = subDir => path.join(__dirname, subDir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
//const global = ruquire("/src/config")
module.exports = {
// 基本路径
publicPath: "/",
//publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/',部署应用包时的基本 URL
// 构建时的输出目录
outputDir: "dist",
// 放置静态资源的目录 相对于outputDir的静态资源(js、css、img、fonts)目录
assetsDir: "assets",
// html 的输出路径
indexPath: "h5.html",
//文件名哈希
filenameHashing: true,
lintOnSave: false, //是否开启eslint
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: !IS_PROD, // 生产环境的 source map
parallel: require("os").cpus().length > 1,
pwa: {},
devServer: {
open: true, //是否自动弹出浏览器页面
host: '0.0.0.0', //表示启动的时候使用的域名,默认可以不写,则是使用localhost和本机IP
port: 8084,
https: false,
hotOnly: false, //是否开启热更新
proxy: {
"/mobile": {
// 接口代理
target: "http://1.1.1.1:8080",
// target: "http://www.baidu.com:8080",
//target: process.env.BASE_URL,
changeOrigin: true, // 是否跨域,虚拟的站点需要更管origin
logLevel: "debug",
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: { // pathRewrite 来重写地址
},
},
},
},
configureWebpack: {
plugins: [
//自动加载模块,而不是起别名,别名需要import,而自动加载的模块不需要import既可以使用
new webpack.ProvidePlugin({
_: "lodash",
echarts: "echarts",
moment: "moment",
$: "jquery",
}),
],
},
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
config
.plugin("ignore")
.use( //只用moment 的中文包
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
);
// 添加别名
config.resolve.alias
//.set("@", resolve("src")) //@ is an alias to /src 这个框架默认
.set("@libs", resolve("src/libs"))
.set("@views", resolve("src/views"))
.set("@static", resolve("static"))
},
};