Vue:安装创建构建部署

记录一次从零使用 vue 的经过(在 window 环境下):

安装 nodejs,官网下载安装包,安装。

安装 Vue CLI,打开命令行工具,执行:npm install -g @vue/cli ,安装成功后通过 vue --version 查看其版本。

创建一个项目,执行 vue create hello-world ,选取默认 preset 就可以创建一个项目。

运行项目,在项目所在目录下,执行 npm run serve ,即可启动项目,浏览器访问 http://localhost:8080 即可看到主页。

关闭项目,命令行下 Crtl + c 即可关闭项目。

构建项目,执行 npm run build ,即可以生成项目的目标文件,存放在 dist 目录下。

部署项目,这里说的部署只是放在本机上运行。拷贝到 dist 目录到 D 盘下,现在项目构建好的文件位置是 D:/dist 。这里要注意 js css image 引入的相对位置。下载 nginx 包,解压,修改 ./conf/nginx.conf 文件,配置信息如下

server {
    listen       80;
    server_name  localhost;
    
    location / {
        root D:/dist;
        index index.html index.htm;
    }
}

然后启动 nginx ,执行 start nginx 。访问 http://localhost:80/index.html ,即可以看到部署好的项目主页。

实际在生产环境中还有许多需要解决的问题。

原文地址:https://www.cnblogs.com/colin220/p/11535359.html