zoukankan      html  css  js  c++  java
  • 关于vue是怎么放到服务器上运行的基于vue-cli3

    之前只接触过将静态页面放到服务器上的操作,接触vue项目后很好奇vue项目是怎么在服务器运行的

    首先创建一个基于vue脚手架(vue-cli3)的vue项目 

    vue create 项目名称

     添加router

    vue add router

     此时一个vue项目已搭建完毕,可以进行开发了

    运行看下效果:(yarn serve)

    看起来没问题,然后执行yarn build 获取打包后的dist文件

    多的这个dist就是打包后的文件

    文件内容:

    直接打开index.html我们会发现是空白并且有报错

    这时需要在项目根目录下增加vue.config.js文件

    在文件中增加

    module.exports = {
     publicPath: './' // <----这里就是会修改webpack的outPath.publicPath
    }
    

    同时注释掉mode

     此时再重新打包vue文件(yarn build) 

     再打开dist文件的index.html文件,已经可以正常打开了

     

    所以,直接将这个dist文件放到服务器上,访问dist文件的index.html就可以了

  • 相关阅读:
    ansible变量
    nginx连接php测试
    redis发布订阅
    堡垒机实例以及数据库操作
    nginx简介,使用
    protobuf
    go NSQ
    go mod
    GIT版本管理工具教程
    linux命令查询网站
  • 原文地址:https://www.cnblogs.com/wangxirui/p/12691819.html
Copyright © 2011-2022 走看看