vuethink安装部署

2024年3月20日 273次阅读 来源: lolsir

下载安装

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

本地域名

DocumentRoot "E:\wamp\www\VueThink"
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'

配置完后在frontEnd中npm 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文件,保存下面配置

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

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

const router = new VueRouter({
    mode: 'hash',
    base: __dirname,
    routes
})

最终结构

VueThink
    php    // tp5
    frontEnd    // 开发版、脚手架
    static    // 打包后的静态资源
    index.html    // 打包后的入口文件
    .htaccess    // 配置文件
    原文作者：lolsir
    原文地址: https://segmentfault.com/a/1190000014358417
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞