Rumah > hujung hadapan web > tutorial js > vue-cli打包上线步骤详解

vue-cli打包上线步骤详解

php中世界最好的语言
Lepaskan: 2018-05-12 10:14:37
asal
1252 orang telah melayarinya

这次给大家带来vue-cli打包上线步骤详解,vue-cli打包上线的注意事项有哪些,下面就是实战案例,一起来看一下。

以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成

而想要打包成一份很简单, 只需要 npm run build 这个命令

这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径

之后只需要放在服务器上运行就好了。

*常用技巧

1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ,打包后文件体积可以减少百分之八十

2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串,也就是版本控制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

php使用curl隐藏覆盖来源ip

PHP共享内存使用与信号控制使用详解

Atas ialah kandungan terperinci vue-cli打包上线步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan