研究院 – thinkphp配合vue history 模式配置

2017-08-10 分类：前端之旅 / 后端之路阅读(6036) 评论(0)

因为想做SEO优化,但是vue做的项目, 所有的地址后面都加了#/ ,所以想办法改成了 history ,并且成功生效!

首先, 编译vue项目后,入口是index.html~~,

我们thinkphp 新增一个控制器,来载入这个index.html模板,记得配置好vue路径!

比如我的vue 项目放在 /app/public/start/ 下面, 我编译完成后, 如果想直接访问到,

那我的所以资源地址必须是域名/app/public/start/xxx.xx

好长好丑有木有!

于是,我就把项目编译到了根目录的某个文件夹,配置如下:

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../../index.html'), //主要是这里,
    assetsRoot: path.resolve(__dirname, '../../'), //还有这里
    assetsSubDirectory: 'static',
    assetsPublicPath: '/index/', //这里是资源地址目录
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

build: {

env: require('./prod.env'),

index: path.resolve(__dirname, '../../index.html'), //主要是这里,

assetsRoot: path.resolve(__dirname, '../../'), //还有这里

assetsSubDirectory: 'static',

assetsPublicPath: '/index/', //这里是资源地址目录

productionSourceMap: true,

// Gzip off by default as many popular static hosts such as

// Surge or Netlify already gzip all static assets for you.

// Before setting to `true`, make sure to:

// npm install --save-dev compression-webpack-plugin

productionGzip: false,

productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to

// View the bundle analyzer report after build finishes:

// `npm run build --report`

// Set to `true` or `false` to always turn it on or off

bundleAnalyzerReport: process.env.npm_config_report

这样的话, 我编译到了根目录的index目录里, 所以我访问

xxx.he29.com/index/ 就能访问到项目,

接下来就该php出场了,

php 新增一个控制器来载入模板

public function index(){
        if(isMobile2()){
            // 手机模式载入这个
            return view('./start/index.html');
        }else{
            $seo = makeSEO($_SERVER['REQUEST_URI']);
             //暂时无视seo,下一篇再讲
            $this->assign('seo',current($seo));
           // 否则载入这个
            return view('./index/index.html');
        }
    }

public function index(){

if(isMobile2()){

// 手机模式载入这个

return view('./start/index.html');

}else{

$seo = makeSEO($_SERVER['REQUEST_URI']);

//暂时无视seo,下一篇再讲

$this->assign('seo',current($seo));

// 否则载入这个

return view('./index/index.html');

}

载入后,访问控制器,应该能载入进来文件了,如果载入错误, 建议查看资源路劲是否正确,

但是我们的前端路由和php路由重合了,无法载入啦!!!

开始配置nginx,让我们所有访问都定向到这个控制器!

# nginx rewrite rule
rewrite ^(.*?)/admin/$   $1/index.php/admin      break;
rewrite ^(.*?)/index/$   $1/index.php/index      break;
rewrite ^(.*?)/api/$     $1/index.php/api      break;
rewrite ^(.*?)/app/([a-zA-Z0-9_]+)$   $1/index/index.html      break;
rewrite ^(.*?)/tool/$   $1/index.php/tool      break;
rewrite ^(.*?)/category/.*?-(d+)-(d+).html$  $1/list.html?id=$2&page=$3      break;
rewrite ^(.*?)/tag/([^/]+)/?$   $1/tag.html?w=$2        break;
rewrite ^(.*?)/tag/([^/]+)/(d+)$    $1/tag.html?w=$2&page=$3              break;
rewrite ^(.*?)/article/([a-zA-Z0-9_]+)/(.*)$   $1/index.php/article?mod=$2&id=$3     break;
# end nginx rewrite rule