第一步 准备webpack项目(以Vue项目为例)
1、准备本地开发环境
- 安装node.js(官网)
- 安装npm(官网)
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、新建vue cli项目
npm install -g vue-cli //全局安装vue cli
vue init webpack my-project //安装vue webpack模板
cnpm install //安装node_modules
npm run dev //运行项目
3、准备服务器环境
- 安装nginx
sudo apt-get update //更新apt-get源
sudo apt-get install nginx
- 安装node.js(如果是更新参考这里)
sudo apt-get install nodejs
- 安装npm(如果是更新参考这里)
sudo apt-get install npm
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、准备代码
将代码部署到服务器(可通过github.com或coding.net来进行代码托管)
可以将项目代码放置在/var/www目录下编译vue项目
npm run build //将项目代码编译至/dist目录下
5、配置nginx文件
cd /etc/nginx/sites-available
cp default <file-name>
将<file-name>配置成如下:
server {
listen 80;
root /var/www/<your-project>/dist;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name <your.domain.name>;
location / {
}
}
接着给配置好的文件添加软链接
ln -sf /etc/nginx/sites-available/<file-name> /etc/nginx/sites-enabled
最后重启nginx sudo service nginx restart
,在浏览器输入(your.domain.name)即可访问
参考目录: