vue项目部署到nginx服务器

0、创建vue项目

• vue-cli2：vue init webpack 项目名称
• vue-cli3：vue create 项目名称

1、打包

vue-cli3：首先在项目根目录创建一个vue.config.js文件；添加如下内容：

module.export = {
    publicPath:'./'
}

然后：

npm run build

 

2、nginx服务器安装

百度下载，解压即可，默认端口为80

3、部署

将vue打包后的dist文件夹放在nginx下的html文件夹即可。访问：http://127.0.0.1/dist即可看到内容。

注意：也可将dist文件夹改名为projectName，访问：http://127.0.0.1/projectName。（如此比较好，因为你的nginx不可能只放一个web项目）

也可以将dist文件夹下的内容放在html中，用http://127.0.0.1便可看到你的vue项目(这样的话默认nginx上的项目可以这样放)。