如何部署Vue应用程序？

作者: 土豆
发布时间: 2024-12-15 05:46:52 (1月前)
转自：

9 条回复

0#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在你的终端 </p> <pre> <code> npm run build </code> </pre> <P> 并托管dist文件夹。更多 <a href="https://www.youtube.com/watch?v=RAGaV8BUHWk" rel="nofollow noreferrer"> 看这个视频 </A> </p> </DIV>

编辑
1#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您使用以下方法创建项目： </p> <pre> <code> vue init webpack myproject </code> </pre> <P> 你需要设置你的 <code> NODE_ENV </code> 生产和运行，因为该项目配置了开发和生产的Web包： </p> <pre> <code> NODE_ENV=production npm run build </code> </pre> <P> 复制 <code> dist/ </code> 目录进入您的网站根目录。 </p> <P> 如果您使用Docker进行部署，则需要一台快速服务器，服务于 <code> dist/ </code> 目录。 </p> <P> 的<strong> Dockerfile </强> </p> <pre> <code> FROM node:carbon RUN mkdir -p /usr/src/app WORKDIR /usr/src/app ADD . /usr/src/app RUN npm install ENV NODE_ENV=production RUN npm run build # Remove unused directories RUN rm -rf ./src RUN rm -rf ./build # Port to expose EXPOSE 8080 CMD [ "npm", "start" ] </code> </pre> </DIV>

编辑
2#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 此命令用于启动开发服务器： </p> <pre> <code> npm run dev </code> </pre> <P> 此命令用于生产构建的位置： </p> <pre> <code> npm run build </code> </pre> <P> 确保查看并进入名为'dist'的生成文件夹。 <BR/> 然后开始将所有这些文件推送到您的服务器。 </p> </DIV>

编辑
3#
回复此人
妖邪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在不使用VUE-CLI的情况下执行此操作的一种方法是将所有脚本文件捆绑到一个胖js文件中，然后将该大胖javascript文件引用到主模板文件中。 </p> <P> 我更喜欢使用webpack作为捆绑器，并在项目的根目录中创建webpack.conig.js。所有配置，如入口点，输出文件，加载器等都存储在该配置文件中。之后，我在package.json文件中添加一个脚本，该文件使用webpack.config.js文件进行webpack配置，并开始观察文件并在webpack.config.js文件中创建一个Js捆绑文件到提到的位置。 </p> </DIV>

编辑
4#
回复此人
star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想你可以使用vue-cli </p> <P> 如果您正在使用Vue CLI以及处理静态资产作为其部署的一部分的后端框架，那么您需要做的就是确保Vue CLI在正确的位置生成构建的文件，然后遵循后端框架的部署指令。 </p> <P> 如果您正在与后端分开开发前端应用程序 - 即您的后端为您的前端公开API以进行通信，那么您的前端本质上是一个纯粹的静态应用程序。您可以将dist目录中的构建内容部署到任何静态文件服务器，但请确保设置正确的baseUrl </p> </DIV>

编辑
5#
回复此人
荧惑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您在创建项目时使用了vue-cli和webpack。 </p> <P> 你可以使用 </p> <P> 的<strong> npm run build </强> 命令行中的命令，它将在您的项目中创建dist文件夹。只需将此文件夹的内容上传到您的ftp并完成。 </p> </DIV>

编辑
6#
回复此人
Just do it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您遇到路径问题，可能需要更改 <code> assetPublicPath </code> 在你的 <code> config/index.js </code> 文件到您的子目录： </p> <P> <a href="http://vuejs-templates.github.io/webpack/backend.html" rel="nofollow noreferrer"> http://vuejs-templates.github.io/webpack/backend.html </A> </p> </DIV>

编辑
7#
回复此人
老人与海 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> <P> npm run build - 这将使代码变得丑化和缩小 </p> </LI> <LI> <P> 将index.html和dist文件夹保存在您网站的根目录中。 </p> </LI> <LI> <P> 您可能感兴趣的免费托管服务 - Firebase托管。 </p> </LI> </醇> </DIV>

编辑

登录后才能参与评论