Vue3电影中后台开发纪实（八）：打包上线

@执行打包

package.json中几个快捷指令

  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },

• dev=在开发服务器上运行效果预览
• build=先执行TS类型检查，全部通过后再执行打包；
• 打包结果会在根目录生成dist目录，其中值包含HTML+CSS+JS+静态文件，所有.vue、.scss等浏览器无法直接识别的模块将被编译为HTML+CSS+JS；
• preview=在随机端口预览打包效果，其效果与前移到Nginx后的效果一致；
• build-only=不执行TS类型检查，直接打包，只要代码没有逻辑问题，依然可以成功打包，只是失去了使用TS的意义；
• type-check=执行TS类型检查

执行打包

npm run build

将打好的包拷贝或剪切到静态资源服务器Nginx的部署目录

可以修改dist目录重命名为有意义的名字，例如movie-manager

修改Nginx配置文件

• 配置文件通常位于Nginx安装目录/conf/nginx.conf
• 在http节点中新增一个server节点，配置如下：

# movie-manager
server {
    # 端口可以自定义 但不要使用[0,1024]之间的端口 这是系统预留区间
    listen       7173;

    # 服务器别名，通常不需要修改
    server_name  localhost;

    #localhost:7173所指向的工程部署目录
    root   "D:/phpStudy/WWW/movie-manager";

    # H5/历史记录路由模式的特殊配置
    # 访问localhost:7173/xxx时
    # 先看看服务端是不是有这个接口，没有就丢还于前端页面匹配前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 访问localhost:7173/api/xxx 代理到 http://localhost:8173/xxx
    location /api/ {
       # 要代理的目标位置
       proxy_pass   http://localhost:8173/;
    }
}

启动Nginx，访问localhost:7173

打包上线即告完成！