nginx部署vue项目

一、打包vue项目

1、修改路径

修改config/index.js的assetsPublicPath为 ./（注意一定是build里面的，下面dev中也有这个配置）

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

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

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // 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、打包项目

执行如下命令进行打包

npm run build

通过上面命令后打包好的静态资源将输出到dist目录中。如图所示：

3、上传项目

将打包后的目录上传至服务器上对应目录，如下图

• testnginx则是将前端项目 build 之后的 dist 目录改名后的文件目录

  

二、nginx部署

1、安装nginx

参考网上指南进行安装

安装成功后执行nginx -v ，出现以下，说明安装成功

2、修改nginx配置

修改nginx安装目录下面的nginx.conf，这个是nginx配置文件。

我对应的目录/etc/nginx。修改其目录下对应的配置文件nginx.conf

修改配置文件主要做三件事：

1. 修改nginx的访问路径，指定端口和访问路径。
2. 把nginx服务器的默认路径改成我们项目所在的路径。
3. 如果你的vue工程用的路由是history模式，需要将客户端发来的url重定向到默认的index.html，才能正常访问。否则只能看到主页。刷新或点击其他页面都会404。

在配置文件中的server里如下修改。listen后面跟的是监听的端口号。server_name后面跟的是服务器地址。root后面的地址是项目上传的路径（就是上面提到的前端项目 build 之后的 dist 目录改名后的文件目录）。try_files是添加到index的映射。

 

4、重启nginx服务

执行如下命令，访问本机地址，即可访问到项目。

service nginx reload