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就可以访问了。
