如何将 Vue Webpack-simple 应用程序部署到 Netlify?
Posted
技术标签:
【中文标题】如何将 Vue Webpack-simple 应用程序部署到 Netlify?【英文标题】:How do I deploy Vue Webpack-simple app to Netlify? 【发布时间】:2019-03-17 01:06:18 【问题描述】:这是我第一次尝试使用 webpack-simple 模板。一般来说,我对 webpack 的经验很少,希望有人能帮助我指出正确的方向。我正在尝试将使用 webpack-simple 的 Vue 应用程序部署到 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。与 devDependencies 相比,我拥有依赖项中的所有内容,但 Netlify 有时会因我的开发依赖项而窒息。
"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: '/'
最后,我的 babel.rc
"presets": [
["env", "modules": false ],
"stage-3"
],
"plugins": [
"syntax-dynamic-import",
"transform-regenerator"
]
部署日志中没有错误。 Netlify 建议该站点已部署。但是,我不断收到“找不到页面”错误。我怀疑我在这里遗漏了一些简单的东西。
另外,当我在本地开发环境中运行构建时,我在 dist 文件夹中只看到两个文件。它们是一个 build.js 和一个 build.js.map 文件。我还应该在某处看到一个 html 文件吗?任何帮助表示赞赏。谢谢。
【问题讨论】:
在我给出的答案中,您可以让 webpack-simple 示例轻松工作,但最好考虑一个更好的部署解决方案示例。虽然这对于初学者了解 Netlify 如何托管 vue 站点来说是件好事。 【参考方案1】:Vue webpack-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
的副本。
【讨论】:
talves,感谢您提供信息丰富的回复!这很有帮助。 这完全救了我!以上是关于如何将 Vue Webpack-simple 应用程序部署到 Netlify?的主要内容,如果未能解决你的问题,请参考以下文章
查找我使用 vue-cli 生成的图像 Webpack-simple 和 Vuejs 的问题
带有 SASS 的 Webpack-simple + vue-cli - 无法编译?
javascript Webpack-simple Vue.js