http-server和nginx启动vue-cli打包后的文件

 

在history模式下打包出来的文件需要开启服务器才能正常运行。

直接打开index.html文件路由访问的路径是根路径之类的。所以会路由跳转会出现一片空白。

开启服务器之后，就可以正常访问跳转了。

具体代码见我的github

Http-server

 

接下来详细说说vue-cli的配置以及如何打开页面。

如果是想把文件放在根目录下

 

根目录下：

路由配置：

 

安装http-server

 

安装npm install http-server -g

 

使用管理员权限打开cmd

 

将cmd的路径更改到你打包的dist目录下，以我的路径为例，输入http-server，开启服务器

复制http://127.0.0.1:8080/路径，用浏览器打开。

 

配置到非根目录：

比如我们经常看到http://127.0.0.1:8080/xxx/xxx/xxx/很长的路径。这种路径怎么配置呢？

 

路由配置：

vue.config.js配置

module.exports = {
    
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */

    devServer: {
        
        host: '0.0.0.0',
        port: 8000,
        https: false,
        hot: true,
        open:true,
        overlay:{
            errors:true,
        }
        
    },
    outputDir:'dist',//重点是这两句
    publicPath:'/dist',//

}

为了方便起见，我在vue-cli项目中新建了一个test文件夹，将重新打包好的文件夹dist放入了test文件夹下：

 使用管理员权限打开cmd，路径为修改到test目录下：

输入http-server，打开http://127.0.0.1:8080/dist/（不是http://127.0.0.1:8080）就可以看到你的首页了。。

 

nginx

以上述部署到根目录的打包方式为例。

vue.config.js

module.exports = {
    
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */

    devServer: {
        
        host: '0.0.0.0',
        port: 8000,
        https: false,
        hot: true,
        open:true,
        overlay:{
            errors:true,
        }
        
    },
    // outputDir:'aaa',
    // publicPath:'/aaa',

}

下载安装nginx。

将cmd的路径换成你解压nginx的目录：

打开解压nginx的目录下conf/nginx.config文件

修改里面的server对象：

server {
    listen 8000;
    server_name localhost;

    location / { 
    root  C:\Users\86178\html5plus\hello\dist;#定位到项目打包后的目录 
    index index.html index.html; 
    try_files $uri $uri/ /index.html;
    } 


}

开启nginx服务：

打开http://127.0.0.1:8000。

就可以看到你的页面了。。

这么配置nginx的好处是可以刷新。