Vue+webpack+vue-router+nginx部署

1.修改生产环境的配置

修改config/index.js的build模块（vue-cli生成的目录结构）
修改assetsPublicPath，值为项目名

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',

    /**
     * You can set by youself according to actual condition
     * You will need to set this if you plan to deploy your site under a sub path,
     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */
    assetsPublicPath: '/project-name/', // If you are deployed on the root path, please use '/'

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

2.修改vue-router的配置

添加base，设置为项目名

//创建路由
export default new Router({
  // mode:'history',  
  base: '/project-name/',
  routes: constantRouterMap
});

mode:'history'：当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！使用该模式，刷新发出http请求不会请求路由，会显示404，所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
需要在nginx配置文件中添加重定向页面：

location / {
  try_files $uri $uri/ /index.html;
}

try_files 需要根据项目进行配置

3.项目打包

npm run build

打包后项目下会生成dist文件夹，部署的内容其实就是该文件夹下的内容

4.nginx配置

话说回来，安装nginx后，直接通过ip访问其实就是访问了nginx默认配置的80端口。
下面是nginx默认的conf文件

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

如果是使用yum安装的nginx的话，可以在/usr/share/nginx/html中找到nignx的默认html页面，也就是说nginx可作为静态web服务器。以此为例，我们可以直接把我们打包好的vue项目直接放在该目录下，也就是打包后dist下的文件放在该目录下，为了更好的区分，我们可以新建一个文件夹，名字为了统一，我们就使用之前在前面修改的project-name作为文件名，然后将前面打包好的dist下的内容拷贝到新建的文件夹下。

2018-09-18_224342.png

其实我们这个时候使用nginx默认的配置就可以访问了，但记得要 nginx -s reload 一下。

在浏览器中输入ip/project-name/index.html就可以访问了。