资讯专栏INFORMATION COLUMN

vuethink安装部署

wangbinke / 1354人阅读

摘要:下载安装下载,,下载好后可以看到目录中有和,是脚手架搭建的前端模块,里面是框架本地域名后端配置新建一个数据库,将下的导进新建的数据库,然后配置下的配好后打开浏览器访问,如果看到接口的字样就是成功了前端配置打开将改成后台地址配置完后在中运行

下载安装

下载vuethink,git clone https://github.com/honraytech/VueThink.git,下载好后可以看到VueThink目录中有frontEnd和php,frontEnd是vue-cli脚手架搭建的前端模块,php里面是thinkphp5框架

本地域名
DocumentRoot "E:wampwwwVueThink"
ServerName vt.com
后端配置

新建一个数据库,将php下的install.sql导进新建的数据库,然后配置php下的config/database.php;配好后打开浏览器访问http://vt.com/php/,如果看到‘vuethink接口’的字样就是成功了

前端配置

打开frontEnd/src/main.js

// 将HOST改成后台地址
axios.defaults.baseURL = "http://vt.com/php/index.php"
window.HOST = "http://vt.com/php/index.php"

配置完后在frontEndnpm run dev运行开发版(localhost:8080或者vt.com:8080),npm run build打包发布版,将build生成的dist下的static目录和index.html拷贝至VueThink目录下,在浏览器输入vt.com就可以访问了

其它问题

eslint报错

你可能遇到eslint的疯狂报错,打开frontEnd/build/webpack.base.conf.js,将eslint配置注释掉

eslint: {
    // configFile: "./.eslintrc.json"
},
module: {
    preLoaders: [
      // {
      //   test: /.js$/,
      //   exclude: /node_modules/,
      //   loader: "eslint"
      // },
      // {
      //   test: /.vue$/,
      //   exclude: /node_modules/,
      //   loader: "eslint"
      // }
    ],

build打包后刷新not found问题

这是vue-router的history模式的问题,在VueThink下建个.htaccess文件,保存下面配置


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

如果不是Apache请查看详细文档,或者直接将路由模式改回默认的hash模式(如果对路由不讲究的话)

const router = new VueRouter({
    mode: "hash",
    base: __dirname,
    routes
})
最终结构
VueThink
    php    // tp5
    frontEnd    // 开发版、脚手架
    static    // 打包后的静态资源
    index.html    // 打包后的入口文件
    .htaccess    // 配置文件

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/28607.html

相关文章

  • vuethink安装配置

    摘要:导入服务端根文件夹数据库文件,数据库内用户表账号数据库名,密码并修改配置文件。步骤把项目放入任意服务器,把导入数据库,进入修改数据库配置,主要是数据库名,用户名和密码进去目录执行启动前端。 vuethink下载地址:https://github.com/honraytech... 项目介绍VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex...

    graf 评论0 收藏0
  • 前端开源项目周报0328

    摘要:由出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 由OpenDigg 出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。react-overdrive 超级简单的神奇移动过渡 show...

    novo 评论0 收藏0
  • 前端开源项目周报0328

    摘要:由出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 由OpenDigg 出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。react-overdrive 超级简单的神奇移动过渡 show...

    songjz 评论0 收藏0
  • 前端开源项目周报0328

    摘要:由出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 由OpenDigg 出品的前端开源项目周报第十四期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。react-overdrive 超级简单的神奇移动过渡 show...

    李增田 评论0 收藏0
  • ssl证书怎么部署安装?SSL证书下载后如何安装

    摘要:证书怎么部署安装证书是数字安全证书一种,网站部署了证书后,可以实现加密访问,保障用户隐私信息安全。证书怎么部署安装第一,需要部署证书安装环境的一台服务器,还需要一张证书。ssl证书怎么部署安装?ssl证书是数字安全证书一种,网站部署了SSL证书后,可以实现https加密访问,保障用户隐私信息安全。SSL证书需由可信的CA机构签发,然后下载安装到服务器上,那么ssl证书下载后如何安装? ...

    JackJiang 评论0 收藏0

发表评论

0条评论

wangbinke

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<