Laravel Vue生产实例
我有一个Laravel Vue项目,在开发中运行良好。我已经试着把它放到我们的生产服务器上好几个小时了。然而,当我访问URL时,我会看到一个空白页面。在控制台中检查时,我注意到所有js区块文件返回状态为200,但其内容是“很抱歉,没有Javascript,项目名称无法正常工作。” 以下是我的webpack.mix.js的一个片段Laravel Vue生产实例,laravel,vue.js,server,shared-hosting,Laravel,Vue.js,Server,Shared Hosting,我有一个Laravel Vue项目,在开发中运行良好。我已经试着把它放到我们的生产服务器上好几个小时了。然而,当我访问URL时,我会看到一个空白页面。在控制台中检查时,我注意到所有js区块文件返回状态为200,但其内容是“很抱歉,没有Javascript,项目名称无法正常工作。” 以下是我的webpack.mix.js的一个片段 mix .js('resources/js/app.js', 'public/js') .webpackConfig({ resolve: {
mix
.js('resources/js/app.js', 'public/js')
.webpackConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'frontend/src/'),
'@themeConfig': path.resolve(__dirname, 'frontend/themeConfig.js'),
'@core': path.resolve(__dirname, 'frontend/src/@core'),
'@validations': path.resolve(__dirname, 'frontend/src/@core/utils/validations/validations.js'),
'@axios': path.resolve(__dirname, 'frontend/src/libs/axios')
}
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['frontend/node_modules', 'frontend/src/assets']
}
}
}
]
},
{
test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
loaders: {
loader: 'file-loader',
options: {
name: 'images/[path][name].[ext]',
context: '../vuexy-vuejs-bootstrap-vue-template/src/assets/images'
// context: 'frontend/src/assets/images'
}
}
}
]
}
})
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [require('autoprefixer'), require('postcss-rtl')]
})
// ------------------------------------------------
// If you are deploying on subdomain/subfolder. Uncomment the below code before running the 'yarn prod' or 'npm run production' command.
// Please Change below 'publicPath' and 'setResourceRoot' options as per your sub-directory path.
// ------------------------------------------------
if (mix.inProduction()) {
mix.version()
mix.webpackConfig({
output: {
publicPath: '/app/',
chunkFilename: 'js/chunks/[name].[chunkhash].js'
}
})
mix.setResourceRoot('/app/')
}else{
mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/[name].js'
}
})
}
我在本地机器上使用ff设置生产:
npm run prod
然后,我通过ssh在服务器上运行以下操作:
composer install --optimize-autoloader --no-dev
php artisan key:generate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="csrf-token" content="j9kLqaAInZ4043rRqT9Zn3kNMHaSfCdF7h5ejnnZ">
<link rel="icon" href="/favicon.ico">
<title>project Title</title>
<link rel="stylesheet" href="https://app.myprojects.com/css/app.css?id=bff15ac59733e85aedce">
<link rel="shortcut icon" href="https://app.myprojects.com/images/logo/favicon.png">
</head>
<body>
<noscript>
<strong>We're sorry but this platform doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<script src="https://app.myprojects.com/js/app.js?id=a74eb61fbd09ea2e1e92"></script>
</body>
</html>
在控制台中,js区块文件将其显示为来自服务器的响应:
composer install --optimize-autoloader --no-dev
php artisan key:generate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="csrf-token" content="j9kLqaAInZ4043rRqT9Zn3kNMHaSfCdF7h5ejnnZ">
<link rel="icon" href="/favicon.ico">
<title>project Title</title>
<link rel="stylesheet" href="https://app.myprojects.com/css/app.css?id=bff15ac59733e85aedce">
<link rel="shortcut icon" href="https://app.myprojects.com/images/logo/favicon.png">
</head>
<body>
<noscript>
<strong>We're sorry but this platform doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<script src="https://app.myprojects.com/js/app.js?id=a74eb61fbd09ea2e1e92"></script>
</body>
</html>
项目名称
很抱歉,没有启用JavaScript,此平台无法正常工作。请使其继续。
任何帮助都将不胜感激 经过进一步的调查,我发现app.css和app.js加载都正确,只有块文件有问题。显然他们是从
https://app.myproject.com/app/js/chunks/1.edcb1b13fece690b424f.js
而不是从
https://app.myproject.com/js/chunks/1.edcb1b13fece690b424f.js
通过将publicPath和resourceRoot设置为/