构建vue cli后如何运行生产站点 [英] How to run production site after build vue cli
问题描述
我正在使用 VueCLI 2 并构建为生产环境.build.js 构建并编译成 200KB.当我重新运行服务器作为开发时，它加载了 3MB.我确定 dist 文件夹中的 build.js 是 200KB.我试图打开 index.html 但它不起作用并重定向到网站上的根目录.
I'm using VueCLI 2 and build as production. THe build.js is built and compiled into 200KB. When I re-run the server as development, it loaded 3MB. I'm sure the build.js inside dist folder is 200KB. I tried to open index.html but it doesn't work and redirect to root directory on website.
Package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
Webpack
module.exports = { ...
module:{
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
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: true
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
])
}
HTML
<body>
<script src="/dist/vendor.js"></script>
<script src="/dist/main.js"></script>
</body>
命令
npm 运行构建
npm 运行开发
推荐答案
npm run build 创建一个 dist 目录，其中包含应用的生产版本.
npm run build creates a dist directory with a production build of your app.
为了在浏览器中提供 index.html，您需要一个 HTTP 服务器.
In order to serve index.html in a browser you need an HTTP server.
例如serve:
npm install -g serve
serve -s dist
默认端口为 5000，但可以使用 -l 或 --listen 标志进行调整:
The default port is 5000, but can be adjusted using the -l or --listen flags:
serve -s build -l 4000
文档:
- https://create-react-app.dev/docs/deployment#静态服务器
- https://github.com/zeit/serve
- https://cli.vuejs.org/guide/deployment.html#本地预览
这篇关于构建vue cli后如何运行生产站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
