报错的地方,似乎提示是我引入script的路径出了问题,但是原项目并未存在script动态引入的情况。以下是 webpack.config.js
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件
const mpPluginConfig = require('./miniprogram.config.js')
const isOptimize = true // 是否压缩业务代码,开发者工具可能无法完美支持业务代码使用到的 es 特性,建议自己做代码压缩
module.exports = {
mode: 'production',
entry: {
// js 入口
home: path.resolve(__dirname, '../src/main.mp.js'),
},
output: {
path: path.resolve(__dirname, './miniprogram/common'), // 放到小程序代码目录中的 common 目录下
library: 'createApp', // 必需字段,不能修改
libraryExport: 'default', // 必需字段,不能修改
libraryTarget: 'window', // 必需字段,不能修改
},
target: 'web', // 必需字段,不能修改
optimization: {
runtimeChunk: false, // 必需字段,不能修改
splitChunks: { // 代码分割配置,不建议修改
chunks: 'all',
minSize: 0,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 100,
maxInitialRequests: 100,
automaticNameDelimiter: '~',
name: false,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
minimizer: isOptimize ? [
// 压缩CSS
new CssMinimizerPlugin({
test: /\.(css|wxss)$/g,
minimizerOptions: {
preset: ["default", {
discardComments: {
removeAll: true
},
},
],
},
}),
// 压缩 js
new TerserPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
})
] : [],
},
module: {
rules: [
// css
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
// vue
{
test: /\.vue$/,
loader: 'vue-loader',
},
// js
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[contenthash]'
}
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'element-plus': 'element-plus/dist/index.full.min.js',
'@': path.resolve(__dirname, '../src'),
package: path.resolve(__dirname, '../package.json'),
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量,用于业务代码判断
}),
new MiniCssExtractPlugin({
filename: '[name].wxss',
}),
new VueLoaderPlugin(),
new MpPlugin(mpPluginConfig),
],
}
以下是miniprogram.config.js
module.exports = {
origin: 'https://test.miniprogram.com',
entry: '/',
router: {
home: [
'/home',
],
},
redirect: {
notFound: 'home',
accessDenied: 'home',
},
generate: {
globalVars: [['SVGElement', 'function SVGElement() {}']], // 兼容 vue3 3.0.8+ 版本
},
app: {
backgroundTextStyle: 'dark',
navigationBarTextStyle: 'white',
navigationBarTitleText: 'miniprogram-project',
},
appExtraConfig: {
sitemapLocation: 'sitemap.json',
},
global: {
share: true,
windowScroll: false,
backgroundColor: '#F7F7F7',
},
pages: {},
optimization: {
domSubTreeLevel: 10,
elementMultiplexing: true,
textMultiplexing: true,
commentMultiplexing: true,
domExtendMultiplexing: true,
styleValueReduce: 5000,
attrValueReduce: 5000,
},
projectConfig: {
appid: 'wx3c952c5a483fe03f',
projectname: 'genshin-calculator',
},
}
如果有碰到类似问题的大佬,希望能指点一下