Webpack项目部署

第一步 准备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)即可访问


参考目录:

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容