[php] codeigniter + vue 세팅 [펌]

[php] codeigniter + vue 세팅 [펌]

 

 

When you need to use Vue.js(Nuxt) on codeigniter, there is no default way on codeigniter.

So I solve this problem with .htaccess file.

 

The main concept is just share one root folder.

And basically, this concept is for separate frontend and backend.

 

Codigniter for Backend. Vue.js for Frontend.

 

Like this.

Project

  |- application

  |- frontend (Vuejs)

  |- system

  |- web

  |- index.php

  |- composer.json

  |- package.json (This is nuxt package.json)

  |- nuxt-config.js

 

 

There is no package.json in frontend folder.

The nuxt build path is web folder. 

 

That's all.

 

Using composer scripts for basic package manager.

So, Add scripts in composer.json

{

...

 

    "scripts": {

        "build": ["@preset", "@npm-generate"],

        "preset": ["@npm-install"],

        "npm-generate": "npm run generate",

        "npm-install": "npm install",

    }   

}

 

And, package.json

{

        ...

 

    "scripts": {

        "dev": "nuxt",

        "build": "nuxt build",

        "start": "nuxt start",

        "generate": "nuxt generate",

        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

        "precommit": "npm run lint"

    },  

}

 

nuxt.config.js

module.exports = { 

...

 

    router: {

        base: '/',

    },  

    srcDir: 'frontend/',

    generate: {

        dir: 'web',

    },  

};

 

And setup rewrite rules on .htaccess

RewriteEngine On

 

DirectoryIndex index.htm index.html index.php

 

RewriteCond %{HTTP:Authorization} ^(.*)

RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

 

RewriteCond $1 !^(index\.php|resources|robots\.txt|favicon\.ico|web/*)

RewriteCond $1 ^(backend/*|api/*|setup/*)

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

 

RewriteCond $1 !^(index\.php|resources|robots\.txt|favicon\.ico|web/*)

RewriteCond $1 !^(backend/*|api/*|setup/*)

RewriteRule ^(.*)$ web/$1 [L,QSA]

 

 

For example..

 

Request => Rewrite

/ => web/index.html    (Vue.js)

/backend/user => index.php/backend/user    (Codeigniter)

/api/user/11 => index.php/api/user/11    (Codeigniter)

/sub/one => web/sub/one/index.html    (Vue.js)

/frontend/sub/one => 404 NOT FOUND

/token/generate => index.php/token/generate    (Codeigniter)

 

When deploy, Just type composer run-script build. That's All

 

출처 : https://chicrock.tistory.com/category/Develop/CodeIgniter