版权声明:未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/85292231
打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:
说明引用路径错了,需要手动修改:
进入config/index.js
原配置中的引用路径是’/’(根目录):
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/",
//打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:只要把assetsPublicPath: "/"改成assetsPublicPath: "./"
// assetsPublicPath 有两个,一个是build里的,一个是dev里的,只用把build里的改成‘./’,dev里的别改
/**
* Source Maps
*/
// productionSourceMap: true,
productionSourceMap: false,//是环境设置为生产环境
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ["js", "css"],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
修改为’./’(当前目录):
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "./",
//打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:只要把assetsPublicPath: "/"改成assetsPublicPath: "./"
// assetsPublicPath 有两个,一个是build里的,一个是dev里的,只用把build里的改成‘./’,dev里的别改
/**
* Source Maps
*/
// productionSourceMap: true,
productionSourceMap: false,//是环境设置为生产环境
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ["js", "css"],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
npm run build