如何解决无法访问我的网站上的链接复制和粘贴:Node.js-Express.js-Webpack-Vue.js-historymode
我最近创建了一个基于Node.js,Express.js和Vue.js的网站,并且路由器处于历史记录模式和Webpack。 由于是单页应用程序,因此我安装了express-history-api-fallback,到目前为止,它仍然可以正常运行,但是(由于总是存在一个but),由于某些原因,我对某些网址不了解,所以我得到了一个白页和一些错误,例如:
Uncaught SyntaxError: Unexpected token '<' ------ manifest.61d5cd8248647cdb144a.js:1
Uncaught SyntaxError: Unexpected token '<' ------ vendor.db7271094dc9fcde8b9f.js:1
Uncaught SyntaxError: Unexpected token '<' ------ app.3cfe27cef1608de00b06.js:1
我不知道问题是出在我的webpack conf文件中还是与node.js一起出现(我想是与前端有关,因为我在be中看不到任何传入请求)还是在我的Vue中-路由器。
我不了解(缺乏知识)的原因是,如果我尝试访问Vue应用程序中的页面,请单击链接(即访问格式为mywebsiteinexample.com的用户个人资料页面) / user / userId),但是如果刷新页面,我只能看到一个白色页面,并且在控制台内,可以看到我上面写的错误。
文件的一般体系结构:
我猜这里有一些有用的代码:
Server.js
const express = require('express')
const fallback = require('express-history-api-fallback')
const path = require('path')
const historyModeHandlerHTTP = express()
const root = `${__dirname}/../`
historyModeHandlerHTTP.use(express.static(root))
historyModeHandlerHTTP.use(fallback(path.join(__dirname + '/../index.html')))
historyModeHandlerHTTP.listen(80,() => {
console.log('HTTP Server on')
})
Webpack.prod.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const copyWebpackPlugin = require('copy-webpack-plugin')
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig,{
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true
})
},devtool: config.build.productionSourceMap ? config.build.devtool : false,output: {
path: config.build.assetsRootMain,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},plugins: [
new webpack.DefinePlugin({
'process.env': env
}),new webpack.Progressplugin(),new CleanWebpackPlugin({
dry: false,cleanOnceBeforeBuildPatterns: [config.build.assetssubdirectory + '*/js/*',config.build.assetssubdirectory + '*/css/*']
}),new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},sourceMap: config.build.productionSourceMap,parallel: true
}),new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),allChunks: true,}),new OptimizeCssplugin({
cssprocessorOptions: config.build.productionSourceMap ?
{
safe: true,map: {
inline: false
}
} :
{
safe: true
}
}),new HtmlWebpackPlugin({
filename: config.build.index,template: 'template.html',inject: true,minify: {
removeComments: true,collapseWhitespace: false,removeAttributeQuotes: true
},chunksSortMode: 'dependency'
}),new webpack.HashedModuleIdsPlugin(),new webpack.optimize.ModuleConcatenationPlugin(),new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',minChunks(module) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
) === 0
)
}
}),new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',minChunks: Infinity
}),new webpack.optimize.CommonsChunkPlugin({
name: 'app',async: 'vendor-async',children: true,minChunks: 3
}),new copyWebpackPlugin([{
from: path.resolve(__dirname,'../static'),to: config.build.assetssubdirectory,ignore: ['.*']
}])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),threshold: 10240,minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
const config = require('../ config')
const path = require('path')
module.exports = {
dev: {
// Paths
assetssubdirectory: 'static',assetsPublicPath: '/',proxyTable: {},// VarIoUs Dev Server settings
host: 'localhost',port: 8080,autoOpenbrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false,devtool: 'cheap-module-eval-source-map',cacheBusting: true,cssSourceMap: true
},build: {
// Template for index.html
index: path.resolve(__dirname,'../../index.html'),// Paths
assetsRoot: path.resolve(__dirname,'../dist'),assetsRootMain: path.resolve(__dirname,'../../'),assetssubdirectory: 'front-end/static',assetsPublicPath: '',mainfile : 'front-end/src/main.js',routerfile : 'front-end/src/router/index.js',constantsFile : 'utils-bf/constants.js',productionSourceMap: true,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js','css'],bundleAnalyzerReport: process.env.npm_config_report
}
}
解决方法
[解决方案]
问题与Webpack的配置有关! 如果有人遇到同样的问题,只需设置PublicPath:'/'
output: {
publicPath: '/',path: config.build.assetsRootMain,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。