第一步 准备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 / {
      try_files $uri $uri/ /index.html;    
    }
}

接着给配置好的文件添加软链接

ln -sf /etc/nginx/sites-available/<file-name> /etc/nginx/sites-enabled

最后重启nginx sudo service nginx restart，在浏览器输入(your.domain.name)即可访问

参考目录：

Vue Webpack
登陆发表评论