Vue3项目升级后main.js无法加载,Webpack5配置求助
Vue2升级Vue3+Webpack5后main.js无法加载,静态资源无法直接访问的问题
我将项目从Vue2升级至Vue3,同时把Webpack升级到了5版本,现在main.js文件无法加载。尝试了Stack Overflow上的所有方案但都无效。另外,我也无法通过URL直接访问文件,例如localhost:8080/src/assets/favicon.png。
以下是我的Webpack配置文件:
const webpack = require('webpack'); const { DefinePlugin } = require('webpack'); const openInEditor = require('launch-editor-middleware'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); const resolveClientEnv = require('./src/util/resolveClientEnv'); const paths = require('./src/util/paths'); module.exports = { entry: { app: ['babel-polyfill', './src/main.js'], }, output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js?v=[fullhash:6]', }, externals: { Moyasar: 'Moyasar', }, module: { rules: [ { test: /\.css$/, use: ['vue-style-loader', 'css-loader'], }, { test: /\.scss$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { }, }, }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[fullhash]', }, }, ], }, watchOptions: { poll: true, }, resolve: { alias: { vue$: 'vue/dist/vue.esm-bundler.js', '@': paths.resolve('src'), }, extensions: ['.*', '.js', '.vue', '.json'], }, devServer: { historyApiFallback: { index: './index.html', }, devMiddleware: { publicPath: '/', }, onBeforeSetupMiddleware: (app) => { app.app.use('/__open-in-editor', openInEditor()); }, }, performance: { hints: false, }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', template: 'template.html', inject: true, }), new DefinePlugin({ __VUE_OPTIONS_API__: 'true', __VUE_PROD_DEVTOOLS__: 'false', ...resolveClientEnv({ publicPath: '/', }), }), ], devtool: 'eval-cheap-module-source-map', infrastructureLogging: { level: 'warn', }, }; if (process.env.NODE_ENV === 'production') { const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports.devtool = 'source-map'; module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"', }, }), new UglifyJSPlugin(), new webpack.LoaderOptionsPlugin({ minimize: true, }), ]); }
请问我是否遗漏了配置项?
内容的提问来源于stack exchange,提问作者Sufiyan Shaikh
相关产品推荐
相关产品推荐

