单页面项目部署注意事项

2017-09-02

开发单页面应用(vue,react,angular),为了提高开发效率,使用webpack作为编译工具和搭建热模块替换(HMR)环境,在项目部署时候这套环境不适合生产环境,所以需要把开发的文件用webpack打包后部署到生产环境,部署的时候需要注意下面几点

加密和压缩

使用webpack的uglifyJS插件可以加密和压缩js文件,同时也可以压缩css文件,常用的配置如下

module.exports = {
 plugins: [
    new webpack.optimize.UglifyJsPlugin() 
 ]
}

声明webpack打包环境变量

module.exports = {
 plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
 ]
}

关闭source map功能

在webpack配置文件中把devtool选项删掉或者使用cheap-module-source-map,最简单的直接使用webpack -p来编译打包生产环境文件

资源文件路径

在css引入图片有时候打包后的路径不对,可以通过output.publicPath修改资源文件的公共路径

url路径

在地址栏手动输入前端路由会在服务器寻找url的对应路由,通常会导致404,所以需要在服务器做相应的配置

nginx服务器

使用 try_files 指令

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

express服务器

配置静态文件服务和路径指向index.html

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

 

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
nginx报错net::ERR_CONTENT_LENGTH_MISMATCH 200
最近换了M1后配置新的开发环境,在安装配置好nginx后,启动项目,打开页面空白,通过控制台查看信息,发现了这样一个错误...
React useMemo实战
useMemo hooks介绍 useMemo hooks的语法如下 const memoizedValue = ...
nginx日志配置
在使用nginx时候,我们经常需要查看对应的请求日志记录或者错误日志记录,nginx日志分两种,分别是访问日志和错误日志...