Vue项目的发布

Vue项目的发布

一：使用Tomcat服务器发布

1.打包Vue项目

（1）修改 /build/index.js 项目打包路径

build{
 // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',       //默认路径为"/"
}

（2）修改 /build/utils.js 字体文件的打包相对路径

build{
 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'          //此为打包后的相对路径
      })
    }
}

（3）执行打包命令

build{
 npm run build
 ...
 Build complete.
}

（4）部署到tomcat安装目录webapps下
新建一个目录： website
将打包后的dist文件夹下的文件复制到 website目录下
启动tomcat，浏览器输入： http://localhost:8080/website

二：使用Nginx服务器发布

1.打包Vue项目过程如上所述

2.修改nginx.conf配置

server {
        listen       8090;                    //配置端口  
        server_name  xxxxxxxxxxx;             //配置ip
		root  D:\NginxProject\website;        //vue项目路径
		index  index.html;                    //vue项目入口html文件
		location / {   
			try_files $uri $uri/ /index.html;
        }		
    }

3.启动nginx，输入： http://xxxxxxxxxxx:8090