Fallstricke, die bei tatsächlichen Vue-Projektabläufen und -Lösungen auftreten

Pit 1. Problem beim Laden von Ressourcen 404 tritt auf, wenn auf index.html nach dem Packen mit Webpack zugegriffen wird

Gelöste Lösung : In index.js in config muss die Ebene des AssetsPublicPath-Attributs im Build-Objekt von '/' auf './' angepasst werden.

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }

 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

Grund:

statische Entwicklungsumgebung Der Ordner basiert auf dem Stammverzeichnis, also verwenden Sie '/' direkt. Zum Beispiel dieses Format: http://localhost:8080/static/img/logo.png.

Jeder sollte wissen, dass die Webpack-Verpackung den statischen Ordner automatisch verpackt. Standardmäßig wird ein dist-Ordner als Stammverzeichnis der Produktionsumgebungsdatei generiert, und der statische Ordner wird in dist generiert. Daher sollte das generierte Format http://localhost:8080/dist/static/img/logo.png sein. Es basiert nicht auf dem Stammverzeichnis, daher darf ‘/’ die entsprechende Ressource nicht finden können.

Stellen Sie die Bedeutung dieser Attribute vor:

assetsRoot: der Zielordnerpfad der Webpack-Ausgabe

assetsSubDirectory: die zweite Ebene des mit Webpack kompilierten Ausgabeordners

assetsPublicPath: Der Veröffentlichungspfad der Webpack-kompilierten Ausgabe, zum Beispiel: /eat in www.woshichihuo.com/eat ist dieser Pfad

Pit 2. Verwenden Sie Webpack danach Verpackung wird beim lokalen Zugriff auf index.html ein weißer Bildschirm angezeigt und die Ressourcen werden normal geladen

Lösung: Stellen Sie den Routing-Einstellungsmodus nicht auf den Verlaufsmodus ein. Der Standardwert ist immer noch Hash. In der Datei index.js im Router-Ordner.

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })

Wenn Sie den Verlaufsmodus benötigen, lesen Sie bitte die offizielle Dokumentation des Vue-Routers:

Das obige ist der detaillierte Inhalt vonFallstricke, die bei tatsächlichen Vue-Projektabläufen und -Lösungen auftreten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!