这是我第一次尝试使用webpack简单模板。我对webpack基本上没有什么经验，希望有人能帮我指出正确的方向。我正在尝试部署一个vue应用程序，它使用webpack simple to netlify。
我的理解是我应该可以在netlify上运行npm run build或yarn build，然后…但是，部署后我得到了404。下面是影响netlify部署的文件：
这是我的webpack配置：
var path = require('path')
var webpack = require('webpack')
require("babel-polyfill");
module.exports = {
entry: ["babel-polyfill", './src/main.js'],
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff|woff2)(\?.*$|$)/,
loader: 'url-loader?importLoaders=1&limit=100000'
},
{
test: /\.svg$/,
loader: 'vue-svg-loader',
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
还有我的package.json。与dev dependencies相反，我拥有依赖项中的所有内容，但netlify有时会为我窒息于devdependencies。
{
"name": "quotes",
"description": "blah blah blah",
"version": "1.0.0",
"author": "Me",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-loader": "^0.5.5",
"prettier": "^1.12.1",
"url-loader": "^1.1.1",
"vue": "^2.5.11",
"vue-loader": "^13.0.5",
"vue-router": "^3.0.1",
"vue-svg-loader": "^0.10.0",
"vue-template-compiler": "^2.4.4",
"vuelidate": "^0.7.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
我的vue.config
module.exports = {
baseUrl: '/'
}
最后，我的宝贝。
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
"plugins": [
"syntax-dynamic-import",
"transform-regenerator"
]
}
部署日志中没有错误。Netlify建议部署该站点。但是，我总是收到一个“找不到页面”的错误。我想我遗漏了一些简单的东西。
另外，当我在本地开发环境中运行构建时，在dist文件夹中只看到两个文件。它们是build.js和build.js.map文件。我应该在那里的某个地方也看到一个html文件吗？如有任何帮助，我们将不胜感激。谢谢你
最佳答案
vuewebpack-simple模板不会创建完成的生成文件夹。它假设您将从项目的根托管您的站点。
本例有两个简单的选项可供netlify托管：
从根目录部署（仅示例）
项目中的任何内容都将部署到Netlify CDN。最佳实践是避免这种解决方案，但这只是一个例子，因此我们将展示它是可能的。这有助于我们理解netlify是如何工作的。
将以下netlify.toml添加到项目的根目录中netlify.toml
[build]
command = "yarn build"
publish = "/"
从复制的部署站点位置生成（推荐）
这将要求您确保添加到网站的任何资产也被复制到生成文件夹。
将以下
netlify.toml添加到项目的根目录中netlify.toml[build]
command = "yarn build && mkdir build && cp index.html build && cp -r dist build/dist"
publish = "build"
同时将
build/添加到.gitignore文件中。注意：复制命令可以移动到
package.json的脚本部分。以上是这个简单的工作示例。同样在更高级的webpack解决方案中，dist文件夹将是您的部署文件夹，并为您处理index.html的副本。关于vue.js - 如何将Vue Webpack简易应用程序部署到Netlify？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52768700/