一、打包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
修改配置文件主要做三件事:
- 修改nginx的访问路径,指定端口和访问路径。
- 把nginx服务器的默认路径改成我们项目所在的路径。
- 如果你的vue工程用的路由是history模式,需要将客户端发来的url重定向到默认的index.html,才能正常访问。否则只能看到主页。刷新或点击其他页面都会404。
在配置文件中的server里如下修改。listen后面跟的是监听的端口号。server_name后面跟的是服务器地址。root后面的地址是项目上传的路径(就是上面提到的前端项目 build 之后的 dist 目录改名后的文件目录)。try_files是添加到index的映射。
4、重启nginx服务
执行如下命令,访问本机地址,即可访问到项目。
service nginx reload