解决 vue-cli3 多入口打包 BASE_URL is not defined
2023-09-11 14:17:02 时间
解决 vue-cli3 多入口打包 BASE_URL is not defined
修改 vue.config.js 文件即可。主要修改方式为使用 configureWebpack 来修改 webpack 的配置,在 config.plugins 中增加 HtmlWebpackPlugin 。
注意,如果使用的模板里面包含全局变量 BASE_URL
的话,需要使用 templateParameters 注入变量的值,否则会报错 BASE_URL is not defined 。
网上的大多数方式都是去修改模板 BASE_URL
为 htmlWebpackPlugin.options.url
,却几乎没有提及 HtmlWebpackPlugin 的 templateParameters 参数。
- 修改前
module.exports = {
//路径前缀
publicPath: "/",
lintOnSave: true,
productionSourceMap: false,
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
});
const entry = config.entry('app');
entry.add('babel-polyfill').end();
entry.add('classlist-polyfill').end();
entry.add('@/mock').end();
},
};
- 修改后
const HtmlWebpackPlugin = require('html-webpack-plugin') // 安装并引用插件
module.exports = {
//路径前缀
publicPath: "/",
lintOnSave: true,
productionSourceMap: false,
configureWebpack: config => {
config.plugins = [
new HtmlWebpackPlugin({
templateParameters: {
BASE_URL: `/`
},
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index2.html',
}),
...config.plugins,
]
console.log(`输出最终应用的 config`, JSON.stringify(config, null, 2))
},
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
});
const entry = config.entry('app');
entry.add('babel-polyfill').end();
entry.add('classlist-polyfill').end();
entry.add('@/mock').end();
},
};
相关文章
- [转] vue前端异常监控sentry实践
- vue - 减少打包后的体积
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- Vue——vue中的双向数据绑定
- Vue vue-awesome-swiper 的坑
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- axios网络交互应用-Vue
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- vue组件---动态组件&异步组件
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- webpack打包.vue文件
- vue-cli4 配置gzip文件处理、nginx配置解决vue单页面打包文件大首次加载慢的问题
- vue前台(二)axios二次封装,接口函数书写以及发送请求
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- 18.0 vue3 vue-router的配置
- 【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)