vue dist打包後找不到圖片路徑
阿新 • • 發佈:2019-01-07
開啟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