构建与部署

项目构建

运行命令：npm run build
待构建完成后，项目根目录会生成一个 html 文件夹，该文件夹即为构建后文件。您可在 vue.config.js 文件中配置输出的文件夹名称。

项目部署

本地部署

构建后的文件夹中的 index.html 文件是无法在浏览器中直接打开进行查看的，需要放在 web 服务器中并配置后才可通过浏览器进行查看。

通过 Live Server 进行查看

如果您使用的编辑器是 vscode，您可在 vscode 应用程序中，搜索并安装 Live Server 插件，安装后，使用 vscode 新开一个窗口，打开 html 文件夹，注意，选择打开目录时一定要选择到 html 文件夹的子文件夹，也就是 index.html 所在的文件夹，否则构建的静态文件会显示路径错误。之后点击 vscode 右下角工具栏的 Go Live ，就可以浏览构建后的网页了。
注意：Go Live 运行后，浏览器默认地址是 Http://localhost:5500 ，因为项目是单页面文件，请勿在地址后面加上 /index.html

设置 nginx 进行查看

下载 nginx 软件包，安装后，在 conf 文件夹的 nginx.conf 文件中的 http 下，添加如下代码

server {
    listen 8001;                            # 监听端口
    server_name 127.0.0.1;                  # 监听地址

    root D:/movie/html;                     # 构建文件所在目录
    index  index.html;                      # 设置默认访问页
    try_files $uri $uri/ /index.html last;  # 单页面应用关键设置，使刷新页面时重定向到 index.html，否则会 404
}